@taskon/widget-react 0.0.1-beta.3 → 0.0.1-beta.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/README.md +1 -1
  2. package/dist/CommunityTaskList.css +1340 -1292
  3. package/dist/EligibilityInfo.css +512 -332
  4. package/dist/LeaderboardWidget.css +355 -152
  5. package/dist/Quest.css +911 -629
  6. package/dist/TaskOnProvider.css +35 -16
  7. package/dist/UserCenterWidget.css +116 -71
  8. package/dist/UserCenterWidget2.css +1285 -748
  9. package/dist/chunks/{CommunityTaskList-C9mPl_31.js → CommunityTaskList-CrMvOB8w.js} +784 -452
  10. package/dist/chunks/{EligibilityInfo-DGBffKN8.js → EligibilityInfo-Beww12QX.js} +1569 -597
  11. package/dist/chunks/{LeaderboardWidget-DPOQVXkT.js → LeaderboardWidget-DwuSpVl0.js} +2 -2
  12. package/dist/chunks/{PageBuilder-WCZvxL2j.js → PageBuilder-DsX6Tv0N.js} +5 -5
  13. package/dist/chunks/{Quest-DjGH_8bx.js → Quest-CuD2LElS.js} +713 -484
  14. package/dist/chunks/{TaskOnProvider-iannERG1.js → TaskOnProvider-xUeP2Nro.js} +78 -65
  15. package/dist/chunks/{ThemeProvider-DNJqI2lD.js → ThemeProvider-Bt4UZ33y.js} +33 -9
  16. package/dist/chunks/{UserCenterWidget-CAhgp46j.js → UserCenterWidget-CB0hnj-L.js} +69 -31
  17. package/dist/chunks/{UserCenterWidget-B0O-f_xl.js → UserCenterWidget-CvU6K4AC.js} +21 -7
  18. package/dist/chunks/communitytask-es-1zawvXEX.js +311 -0
  19. package/dist/chunks/communitytask-ja-CmW6nP-L.js +311 -0
  20. package/dist/chunks/communitytask-ko-BD0hzQSi.js +311 -0
  21. package/dist/chunks/communitytask-ru-DhySaZL8.js +311 -0
  22. package/dist/chunks/createLocaleLoader-BameiEhU.js +65 -0
  23. package/dist/chunks/{dynamic-import-helper-B2j_dZ4V.js → dynamic-import-helper-WmIF58Sb.js} +1 -1
  24. package/dist/chunks/quest-es-D-b5xcme.js +948 -0
  25. package/dist/chunks/quest-ja-Dxd2vqBF.js +948 -0
  26. package/dist/chunks/quest-ko-CSmRWgK_.js +948 -0
  27. package/dist/chunks/quest-ru-CkEKv1_F.js +948 -0
  28. package/dist/chunks/taskwidget-es-Do9b3Mqw.js +245 -0
  29. package/dist/chunks/taskwidget-ja-CqSu-yWA.js +245 -0
  30. package/dist/chunks/taskwidget-ko-EHgXFV4B.js +245 -0
  31. package/dist/chunks/taskwidget-ru-CMbLQDK4.js +245 -0
  32. package/dist/community-task.js +1 -1
  33. package/dist/core.d.ts +17 -5
  34. package/dist/core.js +8 -7
  35. package/dist/dynamic-import-helper.css +424 -303
  36. package/dist/index.d.ts +56 -5
  37. package/dist/index.js +18 -16
  38. package/dist/leaderboard.js +2 -2
  39. package/dist/page-builder.js +1 -1
  40. package/dist/quest.d.ts +682 -0
  41. package/dist/quest.js +3 -1
  42. package/dist/user-center.d.ts +3 -1
  43. package/dist/user-center.js +5 -5
  44. package/package.json +7 -1
package/dist/UserCenterWidget2.css CHANGED
@@ -5,6 +5,7 @@
5
5
  */
6
6
 
7
7
  /* ==================== 输入框 ==================== */
8
+
8
9
  .taskon-input {
9
10
  width: 100%;
10
11
  height: 40px;
@@ -39,11 +40,13 @@
39
40
  }
40
41
 
41
42
  /* ==================== 包装器（用于 rightSlot 和 error） ==================== */
43
+
42
44
  .taskon-input-wrapper {
43
45
  width: 100%;
44
46
  }
45
47
 
46
48
  /* ==================== 容器（包含输入框和右侧插槽） ==================== */
49
+
47
50
  .taskon-input-container {
48
51
  display: flex;
49
52
  align-items: center;
@@ -64,6 +67,7 @@
64
67
  }
65
68
 
66
69
  /* 容器内的输入框样式重置 */
70
+
67
71
  .taskon-input--in-container {
68
72
  flex: 1;
69
73
  border: none;
@@ -76,6 +80,7 @@
76
80
  }
77
81
 
78
82
  /* ==================== 右侧插槽 ==================== */
83
+
79
84
  .taskon-input-slot {
80
85
  flex-shrink: 0;
81
86
  display: flex;
@@ -83,6 +88,7 @@
83
88
  }
84
89
 
85
90
  /* MAX 按钮样式（通用样式） */
91
+
86
92
  .taskon-input-slot button {
87
93
  padding: 4px 8px;
88
94
  font-size: 12px;
@@ -105,37 +111,13 @@
105
111
  }
106
112
 
107
113
  /* ==================== 错误信息 ==================== */
114
+
108
115
  .taskon-input-error {
109
116
  margin: 4px 0 0 0;
110
117
  font-size: 12px;
111
118
  color: var(--taskon-color-error);
112
119
  line-height: 1.4;
113
120
  }
114
-
115
- /* ==================== 响应式 ==================== */
116
- @media (max-width: 750px) {
117
- .taskon-input {
118
- height: 10.667vw;
119
- padding: 0 3.2vw;
120
- font-size: 3.733vw;
121
- line-height: 10.667vw;
122
- }
123
-
124
- .taskon-input-container {
125
- padding-right: 3.2vw;
126
- gap: 2.133vw;
127
- }
128
-
129
- .taskon-input-slot button {
130
- padding: 1.067vw 2.133vw;
131
- font-size: 3.2vw;
132
- }
133
-
134
- .taskon-input-error {
135
- margin-top: 1.067vw;
136
- font-size: 3.2vw;
137
- }
138
- }
139
121
  /**
140
122
  * ClaimNftDialog 样式
141
123
  */
@@ -150,10 +132,11 @@
150
132
  align-items: center;
151
133
  padding: 24px;
152
134
  text-align: center;
153
- color: var(--taskon-uc-color-text-lightest, #ffffff);
135
+ color: var(--taskon-color-text);
154
136
  }
155
137
 
156
138
  /* NFT 图片 */
139
+
157
140
  .taskon-claim-dialog-nft {
158
141
  margin-bottom: 20px;
159
142
  }
@@ -166,6 +149,7 @@
166
149
  }
167
150
 
168
151
  /* 状态图标区域 */
152
+
169
153
  .taskon-claim-dialog-status {
170
154
  margin-bottom: 16px;
171
155
  min-height: 48px;
@@ -175,6 +159,7 @@
175
159
  }
176
160
 
177
161
  /* 加载动画 */
162
+
178
163
  .taskon-claim-dialog-spinner {
179
164
  width: 48px;
180
165
  height: 48px;
@@ -184,8 +169,8 @@
184
169
  .taskon-claim-dialog-spinner__circle {
185
170
  width: 100%;
186
171
  height: 100%;
187
- border: 3px solid var(--taskon-color-border-secondary, rgba(255, 255, 255, 0.16));
188
- border-top-color: var(--taskon-uc-color-link, var(--taskon-color-primary, #ffd465));
172
+ border: 3px solid var(--taskon-color-border-secondary);
173
+ border-top-color: var(--taskon-color-primary);
189
174
  border-radius: 50%;
190
175
  animation: taskon-claim-spin 0.8s linear infinite;
191
176
  }
@@ -197,50 +182,54 @@
197
182
  }
198
183
 
199
184
  /* 状态图标 */
185
+
200
186
  .taskon-claim-dialog-icon {
201
187
  width: 48px;
202
188
  height: 48px;
203
189
  }
204
190
 
205
191
  .taskon-claim-dialog-icon--success {
206
- color: var(--taskon-color-success, #22c55e);
192
+ color: var(--taskon-color-success);
207
193
  }
208
194
 
209
195
  .taskon-claim-dialog-icon--error {
210
- color: var(--taskon-color-error, #ef4444);
196
+ color: var(--taskon-color-error);
211
197
  }
212
198
 
213
199
  /* 状态消息 */
200
+
214
201
  .taskon-claim-dialog-message {
215
202
  font-size: 16px;
216
203
  font-weight: 500;
217
- color: var(--taskon-uc-color-text-lightest, #ffffff);
204
+ color: var(--taskon-color-text);
218
205
  margin: 0 0 16px;
219
206
  line-height: 1.5;
220
207
  }
221
208
 
222
209
  /* 交易 Hash */
210
+
223
211
  .taskon-claim-dialog-tx {
224
212
  display: flex;
225
213
  align-items: center;
226
214
  gap: 8px;
227
215
  padding: 8px 16px;
228
- background: var(--taskon-uc-color-text-invisible, rgba(255, 255, 255, 0.04));
216
+ background: var(--taskon-color-bg-surface-subtle);
229
217
  border-radius: 8px;
230
218
  margin-bottom: 20px;
231
219
  font-size: 14px;
232
220
  }
233
221
 
234
222
  .taskon-claim-dialog-tx__label {
235
- color: var(--taskon-uc-color-text-light, rgba(255, 255, 255, 0.6));
223
+ color: var(--taskon-color-text-tertiary);
236
224
  }
237
225
 
238
226
  .taskon-claim-dialog-tx__hash {
239
- color: var(--taskon-uc-color-link, var(--taskon-color-primary, #ffd465));
227
+ color: var(--taskon-color-link);
240
228
  font-family: monospace;
241
229
  }
242
230
 
243
231
  /* 操作按钮 */
232
+
244
233
  .taskon-claim-dialog-actions {
245
234
  display: flex;
246
235
  gap: 12px;
@@ -259,8 +248,8 @@
259
248
  }
260
249
 
261
250
  .taskon-claim-dialog-btn--primary {
262
- background: var(--taskon-uc-color-link, var(--taskon-color-primary, #ffd465));
263
- color: #18181b;
251
+ background: var(--taskon-color-primary);
252
+ color: var(--taskon-color-text-on-primary);
264
253
  }
265
254
 
266
255
  .taskon-claim-dialog-btn--primary:hover {
@@ -269,12 +258,70 @@
269
258
 
270
259
  .taskon-claim-dialog-btn--secondary {
271
260
  background: transparent;
272
- color: var(--taskon-uc-color-text-lightest, #ffffff);
273
- border: 1px solid var(--taskon-uc-color-border-btn, rgba(255, 255, 255, 0.1));
261
+ color: var(--taskon-color-text);
262
+ border: 1px solid var(--taskon-color-border);
274
263
  }
275
264
 
276
265
  .taskon-claim-dialog-btn--secondary:hover {
277
- background: rgba(255, 255, 255, 0.06);
266
+ background: var(--taskon-color-bg-surface-strong);
267
+ }
268
+
269
+ @media (max-width: 750px) {
270
+ .taskon-claim-dialog {
271
+ max-width: 100%;
272
+ }
273
+
274
+ .taskon-claim-dialog-content {
275
+ padding: 16px;
276
+ }
277
+
278
+ .taskon-claim-dialog-nft {
279
+ margin-bottom: 16px;
280
+ }
281
+
282
+ .taskon-claim-dialog-nft__image {
283
+ width: 96px;
284
+ height: 96px;
285
+ }
286
+
287
+ .taskon-claim-dialog-status {
288
+ margin-bottom: 12px;
289
+ min-height: 40px;
290
+ }
291
+
292
+ .taskon-claim-dialog-spinner,
293
+ .taskon-claim-dialog-icon {
294
+ width: 40px;
295
+ height: 40px;
296
+ }
297
+
298
+ .taskon-claim-dialog-message {
299
+ font-size: 14px;
300
+ margin-bottom: 12px;
301
+ }
302
+
303
+ .taskon-claim-dialog-tx {
304
+ align-items: flex-start;
305
+ flex-direction: column;
306
+ gap: 4px;
307
+ margin-bottom: 16px;
308
+ }
309
+
310
+ .taskon-claim-dialog-tx__hash {
311
+ display: block;
312
+ max-width: 100%;
313
+ overflow-wrap: anywhere;
314
+ }
315
+
316
+ .taskon-claim-dialog-actions {
317
+ flex-direction: column;
318
+ gap: 8px;
319
+ }
320
+
321
+ .taskon-claim-dialog-btn {
322
+ width: 100%;
323
+ padding: 9px 12px;
324
+ }
278
325
  }
279
326
  /**
280
327
  * PendingTxDialog 样式
@@ -294,14 +341,14 @@
294
341
  margin: 0;
295
342
  font-size: 16px;
296
343
  line-height: 24px;
297
- color: var(--taskon-text-color, #ffffff);
344
+ color: var(--taskon-color-text);
298
345
  }
299
346
 
300
347
  .taskon-pending-dialog-desc {
301
348
  margin: 0;
302
349
  font-size: 14px;
303
350
  line-height: 20px;
304
- color: var(--taskon-text-secondary, rgba(255, 255, 255, 0.7));
351
+ color: var(--taskon-color-text-tertiary);
305
352
  }
306
353
 
307
354
  .taskon-pending-dialog-hash-wrap {
@@ -313,13 +360,13 @@
313
360
 
314
361
  .taskon-pending-dialog-hash-label {
315
362
  font-size: 14px;
316
- color: var(--taskon-text-secondary, rgba(255, 255, 255, 0.7));
363
+ color: var(--taskon-color-text-tertiary);
317
364
  }
318
365
 
319
366
  .taskon-pending-dialog-hash-link,
320
367
  .taskon-pending-dialog-hash-value {
321
368
  font-size: 14px;
322
- color: var(--taskon-uc-color-link, #ffd465);
369
+ color: var(--taskon-color-link);
323
370
  text-decoration: underline;
324
371
  background: none;
325
372
  border: none;
@@ -342,7 +389,7 @@
342
389
  .taskon-pending-dialog-notice-item {
343
390
  font-size: 12px;
344
391
  line-height: 18px;
345
- color: var(--taskon-uc-color-link, #ffd465);
392
+ color: var(--taskon-color-link);
346
393
  }
347
394
 
348
395
  .taskon-pending-dialog-receive-address {
@@ -368,8 +415,8 @@
368
415
  }
369
416
 
370
417
  .taskon-pending-dialog-btn--primary {
371
- background: var(--taskon-primary-color, #ffd465);
372
- color: #18181b;
418
+ background: var(--taskon-color-primary);
419
+ color: var(--taskon-color-text-on-primary);
373
420
  }
374
421
 
375
422
  .taskon-pending-dialog-btn--primary:hover {
@@ -378,12 +425,51 @@
378
425
 
379
426
  .taskon-pending-dialog-btn--secondary {
380
427
  background: transparent;
381
- color: var(--taskon-text-color, #ffffff);
382
- border: 1px solid var(--taskon-uc-color-border-btn, rgba(255, 255, 255, 0.1));
428
+ color: var(--taskon-color-text);
429
+ border: 1px solid var(--taskon-color-border);
383
430
  }
384
431
 
385
432
  .taskon-pending-dialog-btn--secondary:hover {
386
- background: rgba(255, 255, 255, 0.06);
433
+ background: var(--taskon-color-bg-surface-strong);
434
+ }
435
+
436
+ @media (max-width: 750px) {
437
+ .taskon-pending-dialog {
438
+ max-width: 100%;
439
+ }
440
+
441
+ .taskon-pending-dialog-content {
442
+ gap: 12px;
443
+ }
444
+
445
+ .taskon-pending-dialog-title {
446
+ font-size: 15px;
447
+ line-height: 22px;
448
+ }
449
+
450
+ .taskon-pending-dialog-desc,
451
+ .taskon-pending-dialog-hash-label,
452
+ .taskon-pending-dialog-hash-link,
453
+ .taskon-pending-dialog-hash-value {
454
+ font-size: 13px;
455
+ line-height: 18px;
456
+ }
457
+
458
+ .taskon-pending-dialog-notice-item {
459
+ font-size: 11px;
460
+ line-height: 16px;
461
+ }
462
+
463
+ .taskon-pending-dialog-actions {
464
+ align-items: stretch;
465
+ flex-direction: column;
466
+ gap: 8px;
467
+ }
468
+
469
+ .taskon-pending-dialog-btn {
470
+ width: 100%;
471
+ padding: 9px 12px;
472
+ }
387
473
  }
388
474
  /**
389
475
  * BindWalletDialog 组件样式
@@ -391,7 +477,21 @@
391
477
  * 与 taskon-website 保持一致
392
478
  */
393
479
 
480
+ /*
481
+ * Responsive base styles
482
+ *
483
+ * Keep mobile breakpoints and fallback patterns centralized here.
484
+ * Components should reuse these mixins instead of duplicating query logic.
485
+ */
486
+
487
+ /*
488
+ * Desktop-up mixin:
489
+ * 1) Enable desktop enhancement in wider containers
490
+ * 2) Keep viewport media query as fallback
491
+ */
492
+
394
493
  /* ==================== 容器 ==================== */
494
+
395
495
  .taskon-bind-wallet-dialog {
396
496
  position: relative;
397
497
  display: flex;
@@ -399,6 +499,7 @@
399
499
  }
400
500
 
401
501
  /* ==================== 标题 ==================== */
502
+
402
503
  .taskon-bind-wallet-dialog-title {
403
504
  margin: 0;
404
505
  font-size: 22px;
@@ -408,8 +509,9 @@
408
509
  }
409
510
 
410
511
  /* ==================== 链类型标签 ==================== */
512
+
411
513
  .taskon-bind-wallet-dialog-chain-label {
412
- margin-top: 20px;
514
+ margin-top: var(--taskon-spacing-md);
413
515
  font-size: 16px;
414
516
  font-weight: 500;
415
517
  line-height: 20px;
@@ -417,14 +519,16 @@
417
519
  }
418
520
 
419
521
  /* ==================== 钱包网格 ==================== */
522
+
420
523
  .taskon-bind-wallet-dialog-grid {
421
- margin-top: 10px;
524
+ margin-top: var(--taskon-spacing-sm);
422
525
  display: grid;
423
- grid-template-columns: 1fr 1fr;
424
- gap: 18px;
526
+ grid-template-columns: 1fr;
527
+ gap: var(--taskon-spacing-md);
425
528
  }
426
529
 
427
530
  /* ==================== 钱包项 ==================== */
531
+
428
532
  .taskon-bind-wallet-item {
429
533
  position: relative;
430
534
  display: flex;
@@ -450,6 +554,7 @@
450
554
  }
451
555
 
452
556
  /* 钱包图标 */
557
+
453
558
  .taskon-bind-wallet-item-icon {
454
559
  display: flex;
455
560
  align-items: center;
@@ -465,6 +570,7 @@
465
570
  }
466
571
 
467
572
  /* 钱包名称 */
573
+
468
574
  .taskon-bind-wallet-item-name {
469
575
  margin-left: 10px;
470
576
  font-size: 18px;
@@ -474,6 +580,7 @@
474
580
  }
475
581
 
476
582
  /* 已安装标签 */
583
+
477
584
  .taskon-bind-wallet-item-installed {
478
585
  position: absolute;
479
586
  right: 0;
@@ -488,6 +595,7 @@
488
595
  }
489
596
 
490
597
  /* ==================== 连接中状态 ==================== */
598
+
491
599
  .taskon-bind-wallet-item--connecting {
492
600
  opacity: 0.7;
493
601
  cursor: wait;
@@ -499,6 +607,7 @@
499
607
  }
500
608
 
501
609
  /* ==================== 禁用状态 ==================== */
610
+
502
611
  .taskon-bind-wallet-item--disabled {
503
612
  opacity: 0.5;
504
613
  cursor: not-allowed;
@@ -514,6 +623,7 @@
514
623
  }
515
624
 
516
625
  /* 不可用标签 */
626
+
517
627
  .taskon-bind-wallet-item-unavailable {
518
628
  position: absolute;
519
629
  right: 0;
@@ -527,6 +637,7 @@
527
637
  }
528
638
 
529
639
  /* 连接中 spinner */
640
+
530
641
  .taskon-bind-wallet-item-connecting {
531
642
  position: absolute;
532
643
  right: 8px;
@@ -552,71 +663,28 @@
552
663
  }
553
664
 
554
665
  /* ==================== 提示文字 ==================== */
666
+
555
667
  .taskon-bind-wallet-dialog-tip {
556
- margin: 20px 0 0;
668
+ margin: var(--taskon-spacing-md) 0 0;
557
669
  font-size: 14px;
558
670
  line-height: 1.5;
559
671
  color: var(--taskon-color-text-tertiary);
560
672
  text-align: center;
561
673
  }
562
674
 
563
- /* ==================== 响应式 ==================== */
564
- @media (max-width: 750px) {
565
- .taskon-bind-wallet-dialog-title {
566
- font-size: 3.8vw;
567
- line-height: 4vw;
568
- }
569
-
570
- .taskon-bind-wallet-dialog-chain-label {
571
- margin-top: 4vw;
572
- font-size: 4vw;
573
- line-height: 5.6vw;
574
- }
575
-
576
- .taskon-bind-wallet-dialog-grid {
577
- margin-top: 2.667vw;
578
- grid-template-columns: 1fr;
579
- gap: 4vw;
580
- }
581
-
582
- .taskon-bind-wallet-item {
583
- height: 12vw;
584
- }
585
-
586
- .taskon-bind-wallet-item-icon {
587
- width: 6.4vw;
588
- height: 6.4vw;
589
- }
590
-
591
- .taskon-bind-wallet-item-icon svg {
592
- width: 6.4vw;
593
- height: 6.4vw;
594
- }
595
-
596
- .taskon-bind-wallet-item-name {
597
- margin-left: 2.667vw;
598
- font-size: 3.733vw;
599
- line-height: 4.667vw;
600
- }
601
-
602
- .taskon-bind-wallet-dialog-tip {
603
- margin-top: 4vw;
604
- font-size: 3vw;
605
- }
606
- }
607
-
608
675
  /* ==================== 连接中遮层 ==================== */
676
+
609
677
  .taskon-bind-wallet-loading-overlay {
610
678
  position: absolute;
611
679
  /* 使用负值覆盖 Dialog body 的 padding */
612
- inset: -24px;
680
+ inset: -20px;
613
681
  display: flex;
614
682
  flex-direction: column;
615
683
  align-items: center;
616
684
  justify-content: center;
617
685
  background: var(--taskon-color-bg-mask);
618
686
  backdrop-filter: blur(4px);
619
- border-radius: 16px;
687
+ border-radius: 12px;
620
688
  }
621
689
 
622
690
  .taskon-bind-wallet-loading-spinner {
@@ -635,28 +703,69 @@
635
703
  text-align: center;
636
704
  }
637
705
 
638
- @media (max-width: 750px) {
706
+ @supports (container-type: inline-size) {
707
+ @container (min-width: 751px) {
708
+ .taskon-bind-wallet-dialog-chain-label {
709
+ margin-top: 20px;
710
+ }
711
+
712
+ .taskon-bind-wallet-dialog-grid {
713
+ margin-top: 10px;
714
+ grid-template-columns: 1fr 1fr;
715
+ gap: 18px;
716
+ }
717
+
718
+ .taskon-bind-wallet-dialog-tip {
719
+ margin-top: 20px;
720
+ }
721
+
639
722
  .taskon-bind-wallet-loading-overlay {
640
- inset: -20px;
641
- border-radius: 12px;
723
+ inset: -24px;
724
+ border-radius: 16px;
725
+ }
726
+ }
642
727
  }
643
728
 
644
- .taskon-bind-wallet-loading-spinner {
645
- width: 8vw;
646
- height: 8vw;
729
+ @supports not (container-type: inline-size) {
730
+ @media (min-width: 751px) {
731
+ .taskon-bind-wallet-dialog-chain-label {
732
+ margin-top: 20px;
647
733
  }
648
734
 
649
- .taskon-bind-wallet-loading-text {
650
- margin-top: 4vw;
651
- font-size: 3.5vw;
652
- line-height: 5vw;
735
+ .taskon-bind-wallet-dialog-grid {
736
+ margin-top: 10px;
737
+ grid-template-columns: 1fr 1fr;
738
+ gap: 18px;
739
+ }
740
+
741
+ .taskon-bind-wallet-dialog-tip {
742
+ margin-top: 20px;
743
+ }
744
+
745
+ .taskon-bind-wallet-loading-overlay {
746
+ inset: -24px;
747
+ border-radius: 16px;
748
+ }
749
+ }
653
750
  }
654
- }
655
751
  /**
656
752
  * TipPopover 组件样式
657
753
  * 设计原则：组件内部不包含 margin，需要间距由外部控制
658
754
  */
659
755
 
756
+ /*
757
+ * Responsive base styles
758
+ *
759
+ * Keep mobile breakpoints and fallback patterns centralized here.
760
+ * Components should reuse these mixins instead of duplicating query logic.
761
+ */
762
+
763
+ /*
764
+ * Desktop-up mixin:
765
+ * 1) Enable desktop enhancement in wider containers
766
+ * 2) Keep viewport media query as fallback
767
+ */
768
+
660
769
  .taskon-tip-popover-trigger {
661
770
  display: inline-flex;
662
771
  align-items: center;
@@ -677,12 +786,13 @@
677
786
  }
678
787
 
679
788
  /* Custom children trigger - reset button styles */
789
+
680
790
  .taskon-tip-popover-trigger--custom {
681
791
  cursor: pointer;
682
792
  }
683
793
 
684
794
  .taskon-tip-popover-content {
685
- max-width: 266px;
795
+ max-width: 60vw;
686
796
  padding: 12px 16px;
687
797
  border-radius: var(--taskon-border-radius-sm);
688
798
  border: none;
@@ -716,14 +826,23 @@
716
826
  }
717
827
  }
718
828
 
719
- /* Mobile styles */
720
- @media (max-width: 750px) {
829
+ /* Desktop 增强 */
830
+
831
+ @supports (container-type: inline-size) {
832
+ @container (min-width: 751px) {
721
833
  .taskon-tip-popover-content {
722
- max-width: 60vw;
723
- padding: 2.5vw 3.5vw;
724
- font-size: 3vw;
834
+ max-width: 266px;
835
+ }
836
+ }
837
+ }
838
+
839
+ @supports not (container-type: inline-size) {
840
+ @media (min-width: 751px) {
841
+ .taskon-tip-popover-content {
842
+ max-width: 266px;
843
+ }
844
+ }
725
845
  }
726
- }
727
846
  /**
728
847
  * Select 组件样式
729
848
  *
@@ -734,30 +853,38 @@
734
853
  * - 不再定义组件私有主题变量
735
854
  * - 统一使用 ThemeProvider 输出的通用 --taskon-* 变量
736
855
  */
737
-
856
+ /*
857
+ * Responsive base styles
858
+ *
859
+ * Keep mobile breakpoints and fallback patterns centralized here.
860
+ * Components should reuse these mixins instead of duplicating query logic.
861
+ */
862
+ /*
863
+ * Desktop-up mixin:
864
+ * 1) Enable desktop enhancement in wider containers
865
+ * 2) Keep viewport media query as fallback
866
+ */
738
867
  /* ========== 根容器 ========== */
739
868
  .taskon-select {
740
869
  position: relative;
741
870
  display: inline-block;
742
871
  width: 100%;
743
872
  }
744
-
745
873
  /* ========== 禁用状态 ========== */
746
874
  .taskon-select--disabled {
747
875
  opacity: 0.6;
748
876
  cursor: not-allowed;
749
877
  }
750
-
751
878
  /* ========== 触发器 ========== */
752
879
  .taskon-select__trigger {
753
880
  display: flex;
754
881
  align-items: center;
755
- height: 44px;
882
+ height: 40px;
756
883
  min-width: 120px;
757
884
  padding: 0 12px;
758
885
  background: var(--taskon-color-bg-surface-subtle);
759
886
  color: var(--taskon-color-text);
760
- font-size: var(--taskon-font-size);
887
+ font-size: 13px;
761
888
  line-height: 20px;
762
889
  border: 1px solid var(--taskon-color-border);
763
890
  border-radius: var(--taskon-border-radius-sm);
@@ -768,76 +895,63 @@
768
895
  outline: none;
769
896
  user-select: none;
770
897
  }
771
-
772
898
  .taskon-select__trigger:hover:not(.taskon-select__trigger--disabled) {
773
899
  background: var(--taskon-color-bg-surface);
774
900
  border-color: var(--taskon-color-border-secondary);
775
901
  }
776
-
777
902
  .taskon-select__trigger:focus:not(.taskon-select__trigger--disabled) {
778
903
  background: var(--taskon-color-bg-surface);
779
904
  border-color: var(--taskon-color-border-secondary);
780
905
  }
781
-
782
906
  .taskon-select__trigger--open {
783
907
  background: var(--taskon-color-bg-surface);
784
908
  border-color: var(--taskon-color-border-secondary);
785
909
  }
786
-
787
910
  .taskon-select__trigger--disabled {
788
911
  cursor: not-allowed;
789
912
  opacity: 0.6;
790
913
  }
791
-
792
914
  .taskon-select__trigger--error {
793
915
  border-color: var(--taskon-color-error) !important;
794
916
  }
795
-
796
917
  /* 深色主题 */
797
918
  .taskon-select__trigger--dark {
798
919
  background: var(--taskon-color-bg-surface);
799
920
  }
800
-
801
921
  /* 浅色主题 */
802
922
  .taskon-select__trigger--light {
803
923
  background: var(--taskon-color-bg-surface);
804
924
  color: var(--taskon-color-text);
805
925
  border-color: var(--taskon-color-border);
806
926
  }
807
-
808
927
  .taskon-select__trigger--light:hover:not(.taskon-select__trigger--disabled) {
809
928
  background: var(--taskon-color-bg-surface-strong);
810
929
  border-color: var(--taskon-color-border-secondary);
811
930
  }
812
-
813
931
  .taskon-select__trigger--light:focus:not(.taskon-select__trigger--disabled),
814
932
  .taskon-select__trigger--light.taskon-select__trigger--open {
815
933
  background: var(--taskon-color-bg-surface-strong);
816
934
  border-color: var(--taskon-color-border-secondary);
817
935
  }
818
-
819
936
  /* 卡片主题 */
820
937
  .taskon-select__trigger--card {
821
938
  background: transparent;
822
939
  border: none;
823
940
  }
824
-
825
941
  .taskon-select__trigger--card:hover:not(.taskon-select__trigger--disabled),
826
942
  .taskon-select__trigger--card:focus:not(.taskon-select__trigger--disabled),
827
943
  .taskon-select__trigger--card.taskon-select__trigger--open {
828
944
  background: var(--taskon-color-bg-surface-subtle);
829
945
  border: none;
830
946
  }
831
-
832
947
  /* ========== 触发器图标 ========== */
833
948
  .taskon-select__trigger-icon {
834
- width: 20px;
835
- height: 20px;
949
+ width: 16px;
950
+ height: 16px;
836
951
  border-radius: 50%;
837
- margin-right: 10px;
952
+ margin-right: 8px;
838
953
  flex-shrink: 0;
839
954
  }
840
-
841
955
  /* ========== 触发器文本 ========== */
842
956
  .taskon-select__trigger-text {
843
957
  flex: 1;
@@ -846,27 +960,23 @@
846
960
  white-space: nowrap;
847
961
  text-align: left;
848
962
  }
849
-
850
963
  /* ========== 触发器占位符 ========== */
851
964
  .taskon-select__trigger-placeholder {
852
965
  flex: 1;
853
966
  color: var(--taskon-color-text-secondary);
854
967
  text-align: left;
855
968
  }
856
-
857
969
  /* ========== 展开图标 ========== */
858
970
  .taskon-select__unfold-icon {
859
- margin-left: 10px;
971
+ margin-left: 8px;
860
972
  color: currentColor;
861
973
  opacity: 0.6;
862
974
  transition: transform 0.2s;
863
975
  flex-shrink: 0;
864
976
  }
865
-
866
977
  .taskon-select__unfold-icon--rotated {
867
978
  transform: rotate(180deg);
868
979
  }
869
-
870
980
  /* ========== 下拉菜单 ========== */
871
981
  .taskon-select__menu {
872
982
  position: absolute;
@@ -880,60 +990,50 @@
880
990
  overflow: auto;
881
991
  z-index: 9999;
882
992
  }
883
-
884
993
  /* 深色主题 */
885
994
  .taskon-select__menu--dark {
886
995
  background: var(--taskon-color-bg-floating);
887
996
  }
888
-
889
997
  /* 浅色主题 */
890
998
  .taskon-select__menu--light {
891
999
  background: var(--taskon-color-bg-floating);
892
1000
  border-color: var(--taskon-color-border);
893
1001
  }
894
-
895
1002
  /* ========== 选项 ========== */
896
1003
  .taskon-select__option {
897
1004
  display: flex;
898
1005
  align-items: center;
899
- padding: 15px 20px;
1006
+ padding: 12px 16px;
900
1007
  color: var(--taskon-color-text);
901
1008
  cursor: pointer;
902
1009
  transition: background 0.15s;
903
1010
  }
904
-
905
1011
  .taskon-select__option:hover:not(.taskon-select__option--disabled) {
906
1012
  background: var(--taskon-color-bg-surface);
907
1013
  }
908
-
909
1014
  .taskon-select__option--active {
910
1015
  background: var(--taskon-color-bg-surface-subtle);
911
1016
  }
912
-
913
1017
  .taskon-select__option--disabled {
914
1018
  cursor: not-allowed;
915
1019
  opacity: 0.4;
916
1020
  }
917
-
918
1021
  .taskon-select__option--danger .taskon-select__option-label {
919
1022
  color: var(--taskon-color-error);
920
1023
  }
921
-
922
1024
  /* ========== 选项图标 ========== */
923
1025
  .taskon-select__option-icon {
924
- width: 20px;
925
- height: 20px;
1026
+ width: 16px;
1027
+ height: 16px;
926
1028
  border-radius: 50%;
927
- margin-right: 10px;
1029
+ margin-right: 8px;
928
1030
  flex-shrink: 0;
929
1031
  }
930
-
931
1032
  /* ========== 选项内容 ========== */
932
1033
  .taskon-select__option-content {
933
1034
  flex: 1;
934
1035
  min-width: 0;
935
1036
  }
936
-
937
1037
  /* ========== 选项标签 ========== */
938
1038
  .taskon-select__option-label {
939
1039
  font-weight: 500;
@@ -943,7 +1043,6 @@
943
1043
  white-space: nowrap;
944
1044
  text-overflow: ellipsis;
945
1045
  }
946
-
947
1046
  /* ========== 选项描述 ========== */
948
1047
  .taskon-select__option-desc {
949
1048
  font-size: 12px;
@@ -951,30 +1050,24 @@
951
1050
  color: var(--taskon-color-text-secondary);
952
1051
  margin-top: 2px;
953
1052
  }
954
-
955
1053
  .taskon-select__menu--light .taskon-select__option {
956
1054
  color: var(--taskon-color-text);
957
1055
  }
958
-
959
1056
  .taskon-select__menu--light .taskon-select__option:hover:not(.taskon-select__option--disabled) {
960
1057
  background: var(--taskon-color-bg-surface);
961
1058
  }
962
-
963
1059
  .taskon-select__menu--light .taskon-select__option--active {
964
1060
  background: var(--taskon-color-bg-surface-strong);
965
1061
  }
966
-
967
1062
  .taskon-select__menu--light .taskon-select__option-desc {
968
1063
  color: var(--taskon-color-text-secondary);
969
1064
  }
970
-
971
1065
  /* ========== 选中勾选图标 ========== */
972
1066
  .taskon-select__option-check {
973
1067
  margin-left: 8px;
974
1068
  color: var(--taskon-color-success);
975
1069
  flex-shrink: 0;
976
1070
  }
977
-
978
1071
  /* ========== 空状态 ========== */
979
1072
  .taskon-select__empty {
980
1073
  padding: 20px;
@@ -982,75 +1075,107 @@
982
1075
  color: var(--taskon-color-text-secondary);
983
1076
  font-size: 14px;
984
1077
  }
985
-
986
1078
  /* ========== 错误信息 ========== */
987
1079
  .taskon-select__error {
988
1080
  margin-top: 4px;
989
1081
  font-size: 12px;
990
1082
  color: var(--taskon-color-error);
991
1083
  }
1084
+ @supports (container-type: inline-size) {
1085
+ @container (min-width: 751px) {
1086
+ .taskon-select__trigger {
1087
+ height: 44px;
1088
+ font-size: var(--taskon-font-size);
1089
+ }
992
1090
 
993
- /* ========== 响应式 ========== */
994
- @media (max-width: 750px) {
1091
+ .taskon-select__option {
1092
+ padding: 15px 20px;
1093
+ }
1094
+
1095
+ .taskon-select__trigger-icon {
1096
+ width: 20px;
1097
+ height: 20px;
1098
+ margin-right: 10px;
1099
+ }
1100
+
1101
+ .taskon-select__option-icon {
1102
+ width: 20px;
1103
+ height: 20px;
1104
+ margin-right: 10px;
1105
+ }
1106
+
1107
+ .taskon-select__unfold-icon {
1108
+ margin-left: 10px;
1109
+ }
1110
+ }
1111
+ }
1112
+ @supports not (container-type: inline-size) {
1113
+ @media (min-width: 751px) {
995
1114
  .taskon-select__trigger {
996
- height: 40px;
997
- font-size: 13px;
1115
+ height: 44px;
1116
+ font-size: var(--taskon-font-size);
998
1117
  }
999
1118
 
1000
1119
  .taskon-select__option {
1001
- padding: 12px 16px;
1120
+ padding: 15px 20px;
1002
1121
  }
1003
1122
 
1004
1123
  .taskon-select__trigger-icon {
1005
- width: 16px;
1006
- height: 16px;
1007
- margin-right: 8px;
1124
+ width: 20px;
1125
+ height: 20px;
1126
+ margin-right: 10px;
1008
1127
  }
1009
1128
 
1010
1129
  .taskon-select__option-icon {
1011
- width: 16px;
1012
- height: 16px;
1013
- margin-right: 8px;
1130
+ width: 20px;
1131
+ height: 20px;
1132
+ margin-right: 10px;
1014
1133
  }
1015
1134
 
1016
1135
  .taskon-select__unfold-icon {
1017
- margin-left: 8px;
1136
+ margin-left: 10px;
1137
+ }
1138
+ }
1018
1139
  }
1019
- }
1020
1140
  /**
1021
1141
  * WithdrawSelectOption 组件样式
1022
1142
  *
1023
1143
  * 基于 Vue WithdrawSelectOption 组件样式翻译
1024
1144
  * 主题规范：仅使用通用 --taskon-* 变量，不定义局部主题变量
1025
1145
  */
1026
-
1146
+ /*
1147
+ * Responsive base styles
1148
+ *
1149
+ * Keep mobile breakpoints and fallback patterns centralized here.
1150
+ * Components should reuse these mixins instead of duplicating query logic.
1151
+ */
1152
+ /*
1153
+ * Desktop-up mixin:
1154
+ * 1) Enable desktop enhancement in wider containers
1155
+ * 2) Keep viewport media query as fallback
1156
+ */
1027
1157
  .taskon-withdraw-option {
1028
- padding: 15px 6px 15px 20px;
1158
+ padding: 12px 4px 12px 16px;
1029
1159
  cursor: pointer;
1030
1160
  }
1031
-
1032
1161
  .taskon-withdraw-option:hover {
1033
1162
  background: var(--taskon-color-bg-surface);
1034
1163
  }
1035
-
1036
1164
  /* 禁用状态 */
1037
1165
  .taskon-withdraw-option--disabled {
1038
1166
  cursor: not-allowed;
1039
1167
  opacity: 0.4;
1040
1168
  }
1041
-
1042
1169
  /* ========== 主要内容 ========== */
1043
1170
  .taskon-withdraw-option__content {
1044
1171
  display: flex;
1045
1172
  align-items: center;
1046
1173
  }
1047
-
1048
1174
  /* 模糊状态（不可提现） */
1049
1175
  .taskon-withdraw-option__content--blurred {
1050
1176
  pointer-events: none;
1051
1177
  opacity: 0.4;
1052
1178
  }
1053
-
1054
1179
  /* ========== 链信息 ========== */
1055
1180
  .taskon-withdraw-option__chain {
1056
1181
  display: inline-flex;
@@ -1059,22 +1184,19 @@
1059
1184
  width: 33.33%;
1060
1185
  min-width: 0;
1061
1186
  }
1062
-
1063
1187
  .taskon-withdraw-option__chain-icon {
1064
- width: 16px;
1065
- height: 16px;
1188
+ width: 14px;
1189
+ height: 14px;
1066
1190
  border-radius: 50%;
1067
1191
  flex-shrink: 0;
1068
1192
  }
1069
-
1070
1193
  .taskon-withdraw-option__chain-label {
1071
- font-size: 14px;
1194
+ font-size: 13px;
1072
1195
  color: var(--taskon-color-text-secondary);
1073
1196
  overflow: hidden;
1074
1197
  text-overflow: ellipsis;
1075
1198
  white-space: nowrap;
1076
1199
  }
1077
-
1078
1200
  /* ========== Token 信息 ========== */
1079
1201
  .taskon-withdraw-option__token {
1080
1202
  display: flex;
@@ -1082,25 +1204,22 @@
1082
1204
  flex: 1;
1083
1205
  min-width: 0;
1084
1206
  }
1085
-
1086
1207
  .taskon-withdraw-option__token-icon {
1087
- width: 16px;
1088
- height: 16px;
1208
+ width: 14px;
1209
+ height: 14px;
1089
1210
  border-radius: 50%;
1090
1211
  margin-right: 6px;
1091
1212
  flex-shrink: 0;
1092
1213
  }
1093
-
1094
1214
  .taskon-withdraw-option__token-label {
1095
1215
  font-weight: 500;
1096
- font-size: 14px;
1216
+ font-size: 13px;
1097
1217
  line-height: 20px;
1098
1218
  color: var(--taskon-color-text);
1099
1219
  overflow: hidden;
1100
1220
  white-space: nowrap;
1101
1221
  text-overflow: ellipsis;
1102
1222
  }
1103
-
1104
1223
  /* ========== 尾部信息（余额 + 选中状态） ========== */
1105
1224
  .taskon-withdraw-option__trailing {
1106
1225
  display: flex;
@@ -1109,95 +1228,118 @@
1109
1228
  gap: 4px;
1110
1229
  flex-shrink: 0;
1111
1230
  }
1112
-
1113
1231
  .taskon-withdraw-option__balance {
1114
- font-size: 14px;
1232
+ font-size: 13px;
1115
1233
  color: var(--taskon-color-text-tertiary);
1116
1234
  }
1117
-
1118
1235
  .taskon-withdraw-option__check {
1119
1236
  width: 12px;
1120
1237
  height: 8px;
1121
1238
  color: var(--taskon-color-success);
1122
1239
  visibility: hidden;
1123
1240
  }
1124
-
1125
1241
  .taskon-withdraw-option__check--visible {
1126
1242
  visibility: visible;
1127
1243
  }
1128
-
1129
1244
  /* ========== 警告提示 ========== */
1130
1245
  .taskon-withdraw-option__warning {
1131
1246
  margin-top: 4px;
1132
- font-size: 12px;
1247
+ font-size: 11px;
1133
1248
  font-weight: 400;
1134
1249
  color: var(--taskon-color-warning);
1135
1250
  }
1251
+ @supports (container-type: inline-size) {
1252
+ @container (min-width: 751px) {
1253
+ .taskon-withdraw-option {
1254
+ padding: 15px 6px 15px 20px;
1255
+ }
1136
1256
 
1137
- /* ========== 响应式 ========== */
1138
- @media (max-width: 750px) {
1257
+ .taskon-withdraw-option__chain-icon,
1258
+ .taskon-withdraw-option__token-icon {
1259
+ width: 16px;
1260
+ height: 16px;
1261
+ }
1262
+
1263
+ .taskon-withdraw-option__chain-label,
1264
+ .taskon-withdraw-option__token-label,
1265
+ .taskon-withdraw-option__balance {
1266
+ font-size: 14px;
1267
+ }
1268
+
1269
+ .taskon-withdraw-option__warning {
1270
+ font-size: 12px;
1271
+ }
1272
+ }
1273
+ }
1274
+ @supports not (container-type: inline-size) {
1275
+ @media (min-width: 751px) {
1139
1276
  .taskon-withdraw-option {
1140
- padding: 12px 4px 12px 16px;
1277
+ padding: 15px 6px 15px 20px;
1141
1278
  }
1142
1279
 
1143
1280
  .taskon-withdraw-option__chain-icon,
1144
1281
  .taskon-withdraw-option__token-icon {
1145
- width: 14px;
1146
- height: 14px;
1282
+ width: 16px;
1283
+ height: 16px;
1147
1284
  }
1148
1285
 
1149
1286
  .taskon-withdraw-option__chain-label,
1150
1287
  .taskon-withdraw-option__token-label,
1151
1288
  .taskon-withdraw-option__balance {
1152
- font-size: 13px;
1289
+ font-size: 14px;
1153
1290
  }
1154
1291
 
1155
1292
  .taskon-withdraw-option__warning {
1156
- font-size: 11px;
1293
+ font-size: 12px;
1294
+ }
1295
+ }
1157
1296
  }
1158
- }
1159
1297
  /**
1160
1298
  * FormItem 组件样式
1161
1299
  *
1162
1300
  * 基于 Vue FormItem.vue 样式翻译
1163
1301
  */
1164
-
1302
+ /*
1303
+ * Responsive base styles
1304
+ *
1305
+ * Keep mobile breakpoints and fallback patterns centralized here.
1306
+ * Components should reuse these mixins instead of duplicating query logic.
1307
+ */
1308
+ /*
1309
+ * Desktop-up mixin:
1310
+ * 1) Enable desktop enhancement in wider containers
1311
+ * 2) Keep viewport media query as fallback
1312
+ */
1165
1313
  /* ========== 根容器 ========== */
1166
1314
  .taskon-form-item {
1167
- --form-item-space: 16px;
1168
- --form-item-label-space: 8px;
1169
- --form-item-font-size: 14px;
1315
+ --form-item-space: 12px;
1316
+ --form-item-label-space: 6px;
1317
+ --form-item-font-size: 13px;
1170
1318
  --form-item-line-height: 20px;
1171
1319
 
1172
1320
  position: relative;
1173
1321
  }
1174
-
1175
1322
  /* 相邻 FormItem 之间的间距 */
1176
1323
  .taskon-form-item + .taskon-form-item {
1177
1324
  margin-top: var(--form-item-space);
1178
1325
  }
1179
-
1180
1326
  /* Dialog 模式下的间距 */
1181
1327
  .taskon-form-item--dialog + .taskon-form-item--dialog {
1182
- margin-top: 20px;
1328
+ margin-top: 16px;
1183
1329
  }
1184
-
1185
1330
  /* ========== 标签行 ========== */
1186
1331
  .taskon-form-item__row {
1187
1332
  display: flex;
1188
1333
  align-items: center;
1189
1334
  }
1190
-
1191
1335
  /* 有标签时的下边距 */
1192
1336
  .taskon-form-item__row--has-label {
1193
1337
  margin-bottom: var(--form-item-label-space);
1194
1338
  }
1195
-
1196
1339
  /* 无下边距 */
1197
1340
  .taskon-form-item__row--no-margin {
1198
1341
  margin-bottom: 0;
1199
1342
  }
1200
-
1201
1343
  /* ========== 标签 ========== */
1202
1344
  .taskon-form-item__label {
1203
1345
  display: flex;
@@ -1205,22 +1347,19 @@
1205
1347
  font-weight: 500;
1206
1348
  font-size: var(--form-item-font-size);
1207
1349
  line-height: var(--form-item-line-height);
1208
- color: #fff;
1350
+ color: var(--taskon-color-text);
1209
1351
  white-space: nowrap;
1210
1352
  }
1211
-
1212
1353
  /* ========== 可选标记 ========== */
1213
1354
  .taskon-form-item__optional {
1214
- color: rgba(255, 255, 255, 0.4);
1355
+ color: var(--taskon-color-text-disabled);
1215
1356
  }
1216
-
1217
1357
  /* ========== 提示图标 ========== */
1218
1358
  .taskon-form-item__tip {
1219
- margin-left: 6px;
1359
+ margin-left: 8px;
1220
1360
  display: inline-flex;
1221
1361
  align-items: center;
1222
1362
  }
1223
-
1224
1363
  /* ========== 文档链接 ========== */
1225
1364
  .taskon-form-item__doc-link {
1226
1365
  margin-left: auto;
@@ -1228,50 +1367,63 @@
1228
1367
  align-items: center;
1229
1368
  gap: 4px;
1230
1369
  font-size: 14px;
1231
- color: var(--color-link, #7dd3fc);
1370
+ color: var(--taskon-color-link);
1232
1371
  text-decoration: none;
1233
1372
  cursor: pointer;
1234
1373
  }
1235
-
1236
1374
  .taskon-form-item__doc-link:hover {
1237
1375
  text-decoration: underline;
1238
1376
  }
1239
-
1240
1377
  .taskon-form-item__doc-icon {
1241
1378
  width: 8px;
1242
1379
  height: 9px;
1243
1380
  }
1244
-
1245
1381
  /* ========== 错误信息 ========== */
1246
1382
  .taskon-form-item__error {
1247
1383
  margin-top: 4px;
1248
1384
  font-size: 12px;
1249
1385
  line-height: 16px;
1250
- color: #f55;
1386
+ color: var(--taskon-color-error);
1251
1387
  white-space: pre-wrap;
1252
1388
  }
1253
-
1254
1389
  /* 警告样式（橙色） */
1255
1390
  .taskon-form-item__error--warn {
1256
- color: #ffc107;
1391
+ color: var(--taskon-color-warning);
1257
1392
  }
1393
+ @supports (container-type: inline-size) {
1394
+ @container (min-width: 751px) {
1395
+ .taskon-form-item {
1396
+ --form-item-space: 16px;
1397
+ --form-item-label-space: 8px;
1398
+ --form-item-font-size: 14px;
1399
+ }
1258
1400
 
1259
- /* ========== 响应式 ========== */
1260
- @media (max-width: 750px) {
1401
+ .taskon-form-item--dialog + .taskon-form-item--dialog {
1402
+ margin-top: 20px;
1403
+ }
1404
+
1405
+ .taskon-form-item__tip {
1406
+ margin-left: 6px;
1407
+ }
1408
+ }
1409
+ }
1410
+ @supports not (container-type: inline-size) {
1411
+ @media (min-width: 751px) {
1261
1412
  .taskon-form-item {
1262
- --form-item-space: 12px;
1263
- --form-item-label-space: 6px;
1264
- --form-item-font-size: 13px;
1413
+ --form-item-space: 16px;
1414
+ --form-item-label-space: 8px;
1415
+ --form-item-font-size: 14px;
1265
1416
  }
1266
1417
 
1267
1418
  .taskon-form-item--dialog + .taskon-form-item--dialog {
1268
- margin-top: 4vw;
1419
+ margin-top: 20px;
1269
1420
  }
1270
1421
 
1271
1422
  .taskon-form-item__tip {
1272
- margin-left: 2vw;
1423
+ margin-left: 6px;
1424
+ }
1425
+ }
1273
1426
  }
1274
- }
1275
1427
  /**
1276
1428
  * Checkbox 复选框组件样式
1277
1429
  *
@@ -1280,11 +1432,20 @@
1280
1432
  *
1281
1433
  * 参考 Vue 版本 BaseCheckBox.vue 样式实现
1282
1434
  */
1283
-
1435
+ /*
1436
+ * Responsive base styles
1437
+ *
1438
+ * Keep mobile breakpoints and fallback patterns centralized here.
1439
+ * Components should reuse these mixins instead of duplicating query logic.
1440
+ */
1441
+ /*
1442
+ * Desktop-up mixin:
1443
+ * 1) Enable desktop enhancement in wider containers
1444
+ * 2) Keep viewport media query as fallback
1445
+ */
1284
1446
  /* ============================================================================
1285
1447
  根元素
1286
1448
  ============================================================================ */
1287
-
1288
1449
  .taskon-checkbox {
1289
1450
  display: inline-flex;
1290
1451
  align-items: center;
@@ -1293,116 +1454,121 @@
1293
1454
  user-select: none;
1294
1455
  outline: none;
1295
1456
  }
1296
-
1297
1457
  /* 悬停和聚焦效果 */
1298
1458
  .taskon-checkbox:not(.taskon-checkbox--disabled):hover,
1299
1459
  .taskon-checkbox:not(.taskon-checkbox--disabled):focus {
1300
1460
  opacity: 0.8;
1301
1461
  }
1302
-
1303
1462
  /* 禁用状态 */
1304
1463
  .taskon-checkbox--disabled {
1305
1464
  cursor: not-allowed;
1306
1465
  opacity: 0.4;
1307
1466
  }
1308
-
1309
1467
  /* 只读状态 */
1310
1468
  .taskon-checkbox--readonly {
1311
1469
  cursor: default;
1312
1470
  opacity: 0.4;
1313
1471
  }
1314
-
1315
1472
  /* ============================================================================
1316
1473
  隐藏的原生 input
1317
1474
  ============================================================================ */
1318
-
1319
1475
  .taskon-checkbox__input {
1320
1476
  display: none;
1321
1477
  }
1322
-
1323
1478
  /* ============================================================================
1324
1479
  自定义图标容器
1325
1480
  ============================================================================ */
1326
-
1327
1481
  .taskon-checkbox__icon {
1328
1482
  display: flex;
1329
1483
  justify-content: center;
1330
1484
  align-items: center;
1331
- width: 20px;
1332
- height: 20px;
1333
- border: 2px solid var(--taskon-color-border, rgba(255, 255, 255, 0.2));
1334
- border-radius: 4px;
1485
+ width: 16px;
1486
+ height: 16px;
1487
+ border: 2px solid var(--taskon-color-border);
1488
+ border-radius: 3px;
1335
1489
  transition: all 0.2s ease;
1336
1490
  flex-shrink: 0;
1337
1491
  }
1338
-
1339
1492
  /* 选中状态 - 默认绿色背景 */
1340
1493
  .taskon-checkbox__icon--active {
1341
1494
  border: 0 none;
1342
- background-color: var(--taskon-color-secondary, #22c55e);
1495
+ background-color: var(--taskon-color-secondary);
1343
1496
  border-radius: 4px;
1344
1497
  }
1345
-
1346
1498
  /* 选中状态显示勾选图标 */
1347
1499
  .taskon-checkbox__icon--active .taskon-checkbox__icon-checked {
1348
1500
  display: block;
1349
1501
  }
1350
-
1351
1502
  /* light 类型选中状态 - 浅色背景 */
1352
1503
  .taskon-checkbox__icon--active.taskon-checkbox__icon--light {
1353
- background-color: var(--taskon-color-lightest, #f0f0f0);
1504
+ border: 1px solid var(--taskon-color-border);
1505
+ background-color: var(--taskon-color-bg-surface);
1354
1506
  }
1355
-
1356
1507
  /* 圆形样式 */
1357
1508
  .taskon-checkbox__icon--round {
1358
1509
  border-radius: 50%;
1359
1510
  }
1360
-
1361
1511
  /* ============================================================================
1362
1512
  勾选图标 SVG
1363
1513
  ============================================================================ */
1364
-
1365
1514
  .taskon-checkbox__icon-checked {
1366
1515
  display: none;
1367
- width: 12px;
1368
- height: 10px;
1369
- color: var(--taskon-color-text-white, #ffffff);
1516
+ width: 10px;
1517
+ height: 8px;
1518
+ color: var(--taskon-color-text-on-primary);
1519
+ }
1520
+ .taskon-checkbox__icon--active.taskon-checkbox__icon--light .taskon-checkbox__icon-checked {
1521
+ color: var(--taskon-color-text);
1370
1522
  }
1371
-
1372
1523
  /* ============================================================================
1373
1524
  标签文字
1374
1525
  ============================================================================ */
1375
-
1376
1526
  .taskon-checkbox__label {
1377
1527
  margin-left: 8px;
1378
- color: var(--taskon-color-text-light, rgba(255, 255, 255, 0.8));
1379
- font-size: 16px;
1528
+ color: var(--taskon-color-text-secondary);
1529
+ font-size: 14px;
1380
1530
  font-style: normal;
1381
1531
  font-weight: 500;
1382
- line-height: 20px;
1532
+ line-height: 18px;
1383
1533
  }
1534
+ @supports (container-type: inline-size) {
1535
+ @container (min-width: 751px) {
1536
+ .taskon-checkbox__icon {
1537
+ width: 20px;
1538
+ height: 20px;
1539
+ border-radius: 4px;
1540
+ }
1384
1541
 
1385
- /* ============================================================================
1386
- 响应式 - 移动端适配
1387
- ============================================================================ */
1542
+ .taskon-checkbox__icon-checked {
1543
+ width: 12px;
1544
+ height: 10px;
1545
+ }
1388
1546
 
1389
- @media (max-width: 750px) {
1547
+ .taskon-checkbox__label {
1548
+ font-size: 16px;
1549
+ line-height: 20px;
1550
+ }
1551
+ }
1552
+ }
1553
+ @supports not (container-type: inline-size) {
1554
+ @media (min-width: 751px) {
1390
1555
  .taskon-checkbox__icon {
1391
- width: 16px;
1392
- height: 16px;
1393
- border-radius: 3px;
1556
+ width: 20px;
1557
+ height: 20px;
1558
+ border-radius: 4px;
1394
1559
  }
1395
1560
 
1396
1561
  .taskon-checkbox__icon-checked {
1397
- width: 10px;
1398
- height: 8px;
1562
+ width: 12px;
1563
+ height: 10px;
1399
1564
  }
1400
1565
 
1401
1566
  .taskon-checkbox__label {
1402
- font-size: 14px;
1403
- line-height: 18px;
1567
+ font-size: 16px;
1568
+ line-height: 20px;
1569
+ }
1570
+ }
1404
1571
  }
1405
- }
1406
1572
  /**
1407
1573
  * Switch 开关组件样式
1408
1574
  *
@@ -1411,132 +1577,153 @@
1411
1577
  *
1412
1578
  * 参考 Vue 版本 BaseSwitch.vue 样式实现
1413
1579
  */
1414
-
1580
+ /*
1581
+ * Responsive base styles
1582
+ *
1583
+ * Keep mobile breakpoints and fallback patterns centralized here.
1584
+ * Components should reuse these mixins instead of duplicating query logic.
1585
+ */
1586
+ /*
1587
+ * Desktop-up mixin:
1588
+ * 1) Enable desktop enhancement in wider containers
1589
+ * 2) Keep viewport media query as fallback
1590
+ */
1415
1591
  /* ============================================================================
1416
1592
  根元素
1417
1593
  ============================================================================ */
1418
-
1419
1594
  .taskon-switch {
1420
1595
  position: relative;
1421
1596
  display: inline-flex;
1422
1597
  align-items: center;
1423
1598
  vertical-align: middle;
1424
- font-size: 16px;
1425
- line-height: 23px;
1426
- color: var(--taskon-color-text-light, rgba(255, 255, 255, 0.8));
1599
+ font-weight: 500;
1600
+ font-size: 12px;
1601
+ line-height: 130%;
1602
+ color: var(--taskon-color-text-secondary);
1427
1603
  cursor: pointer;
1428
1604
  user-select: none;
1429
1605
  }
1430
-
1431
1606
  /* 禁用状态 */
1432
1607
  .taskon-switch--disabled {
1433
1608
  cursor: not-allowed;
1434
1609
  opacity: 0.5;
1435
1610
  }
1436
-
1437
1611
  /* ============================================================================
1438
1612
  标签文字
1439
1613
  ============================================================================ */
1440
-
1441
1614
  .taskon-switch__label {
1442
1615
  cursor: pointer;
1443
1616
  }
1444
-
1445
1617
  .taskon-switch__label--disabled {
1446
1618
  cursor: not-allowed;
1447
1619
  }
1448
-
1449
1620
  /* ============================================================================
1450
1621
  开关按钮
1451
1622
  ============================================================================ */
1452
-
1453
1623
  .taskon-switch__button {
1454
1624
  position: relative;
1455
- width: 38px;
1456
- height: 20px;
1625
+ width: 32px;
1626
+ height: 18px;
1457
1627
  line-height: 20px;
1458
- background: #464646;
1459
- border: 1px solid rgba(255, 255, 255, 0.1);
1628
+ background: var(--taskon-color-bg-surface-strong);
1629
+ border: 1px solid var(--taskon-color-border);
1460
1630
  border-radius: 100px;
1461
- padding: 2px 3px;
1462
- margin-left: 15px;
1631
+ padding: 2px;
1632
+ margin-left: 10px;
1463
1633
  transition: all 0.3s ease;
1464
1634
  flex-shrink: 0;
1465
1635
  }
1466
-
1467
1636
  /* 开启状态 - 默认渐变背景 */
1468
1637
  .taskon-switch__button--active {
1469
- background: linear-gradient(89.87deg, #cbff01 0.13%, #00ffa3 99.92%);
1638
+ background: linear-gradient(
1639
+ 90deg,
1640
+ var(--taskon-color-primary) 0%,
1641
+ var(--taskon-color-secondary) 100%
1642
+ );
1470
1643
  border-color: transparent;
1471
1644
  }
1472
-
1473
1645
  /* 禁用状态 */
1474
1646
  .taskon-switch__button--disabled {
1475
1647
  cursor: not-allowed;
1476
1648
  }
1477
-
1478
1649
  /* ============================================================================
1479
1650
  滑块
1480
1651
  ============================================================================ */
1481
-
1482
1652
  .taskon-switch__slider {
1483
- width: 14px;
1484
- height: 14px;
1653
+ width: 12px;
1654
+ height: 12px;
1485
1655
  border-radius: 50%;
1486
- background: #fff;
1656
+ background: var(--taskon-color-text);
1487
1657
  transition: margin-left 0.3s ease;
1488
1658
  }
1489
-
1490
1659
  /* 开启状态的滑块位置 */
1491
1660
  .taskon-switch__button--active .taskon-switch__slider {
1492
- margin-left: 18px;
1493
- background: #25292c;
1661
+ margin-left: 14px;
1662
+ background: var(--taskon-color-text-on-primary);
1494
1663
  }
1495
-
1496
1664
  /* ============================================================================
1497
1665
  高亮样式 (highlight type)
1498
1666
  ============================================================================ */
1499
-
1500
1667
  .taskon-switch--highlight .taskon-switch__button {
1501
- background: rgba(70, 70, 70, 0.2);
1668
+ background: var(--taskon-color-bg-surface-subtle);
1502
1669
  }
1503
-
1504
1670
  .taskon-switch--highlight .taskon-switch__button--active {
1505
- background: rgba(203, 255, 1, 0.1);
1506
- border: 1px solid rgba(255, 255, 255, 0.06);
1671
+ background: var(--taskon-color-primary-bg);
1672
+ border: 1px solid var(--taskon-color-border-secondary);
1507
1673
  }
1508
-
1509
1674
  .taskon-switch--highlight .taskon-switch__button--active .taskon-switch__slider {
1510
- background: #cbff01;
1675
+ background: var(--taskon-color-primary);
1511
1676
  }
1677
+ @supports (container-type: inline-size) {
1678
+ @container (min-width: 751px) {
1679
+ .taskon-switch {
1680
+ font-weight: 400;
1681
+ font-size: 16px;
1682
+ line-height: 23px;
1683
+ }
1512
1684
 
1513
- /* ============================================================================
1514
- 响应式 - 移动端适配
1515
- ============================================================================ */
1685
+ .taskon-switch__button {
1686
+ width: 38px;
1687
+ height: 20px;
1688
+ padding: 2px 3px;
1689
+ margin-left: 15px;
1690
+ }
1516
1691
 
1517
- @media (max-width: 750px) {
1692
+ .taskon-switch__slider {
1693
+ width: 14px;
1694
+ height: 14px;
1695
+ }
1696
+
1697
+ .taskon-switch__button--active .taskon-switch__slider {
1698
+ margin-left: 18px;
1699
+ }
1700
+ }
1701
+ }
1702
+ @supports not (container-type: inline-size) {
1703
+ @media (min-width: 751px) {
1518
1704
  .taskon-switch {
1519
- font-weight: 500;
1520
- font-size: 12px;
1521
- line-height: 130%;
1705
+ font-weight: 400;
1706
+ font-size: 16px;
1707
+ line-height: 23px;
1522
1708
  }
1523
1709
 
1524
1710
  .taskon-switch__button {
1525
- width: 32px;
1526
- height: 18px;
1527
- padding: 2px;
1528
- margin-left: 10px;
1711
+ width: 38px;
1712
+ height: 20px;
1713
+ padding: 2px 3px;
1714
+ margin-left: 15px;
1529
1715
  }
1530
1716
 
1531
1717
  .taskon-switch__slider {
1532
- width: 12px;
1533
- height: 12px;
1718
+ width: 14px;
1719
+ height: 14px;
1534
1720
  }
1535
1721
 
1536
1722
  .taskon-switch__button--active .taskon-switch__slider {
1537
- margin-left: 14px;
1723
+ margin-left: 18px;
1724
+ }
1725
+ }
1538
1726
  }
1539
- }
1540
1727
  /**
1541
1728
  * Points 表格样式
1542
1729
  *
@@ -1544,6 +1731,7 @@
1544
1731
  */
1545
1732
 
1546
1733
  /* ========== Points List ========== */
1734
+
1547
1735
  .taskon-points-list {
1548
1736
  width: 100%;
1549
1737
  }
@@ -1551,8 +1739,8 @@
1551
1739
  .taskon-points-list__header {
1552
1740
  display: flex;
1553
1741
  align-items: center;
1554
- gap: var(--taskon-spacing-sm, 8px);
1555
- margin-bottom: var(--taskon-spacing-md, 16px);
1742
+ gap: var(--taskon-spacing-sm);
1743
+ margin-bottom: var(--taskon-spacing-md);
1556
1744
  }
1557
1745
 
1558
1746
  .taskon-points-list__icon {
@@ -1565,40 +1753,40 @@
1565
1753
  .taskon-points-list__title {
1566
1754
  font-size: 16px;
1567
1755
  font-weight: 600;
1568
- color: var(--taskon-color-text, #1f2937);
1756
+ color: var(--taskon-color-text);
1569
1757
  margin: 0;
1570
1758
  }
1571
1759
 
1572
1760
  .taskon-points-list__total {
1573
1761
  display: flex;
1574
1762
  align-items: baseline;
1575
- gap: var(--taskon-spacing-xs, 4px);
1763
+ gap: var(--taskon-spacing-xs);
1576
1764
  margin-left: auto;
1577
1765
  }
1578
1766
 
1579
1767
  .taskon-points-list__total-value {
1580
1768
  font-size: 20px;
1581
1769
  font-weight: 700;
1582
- color: var(--taskon-color-text, #1f2937);
1770
+ color: var(--taskon-color-text);
1583
1771
  }
1584
1772
 
1585
1773
  .taskon-points-list__total-label {
1586
1774
  font-size: 12px;
1587
- color: var(--taskon-color-text-secondary, #6b7280);
1775
+ color: var(--taskon-color-text-secondary);
1588
1776
  }
1589
1777
 
1590
1778
  .taskon-points-list__table {
1591
1779
  width: 100%;
1592
- border: 1px solid var(--taskon-color-border, #e5e7eb);
1593
- border-radius: var(--taskon-border-radius-sm, 6px);
1780
+ border: 1px solid var(--taskon-color-border);
1781
+ border-radius: var(--taskon-border-radius-sm);
1594
1782
  overflow: hidden;
1595
1783
  }
1596
1784
 
1597
1785
  .taskon-points-list__row {
1598
1786
  display: flex;
1599
1787
  align-items: center;
1600
- padding: var(--taskon-spacing-sm, 8px) var(--taskon-spacing-md, 16px);
1601
- border-bottom: 1px solid var(--taskon-color-border, #e5e7eb);
1788
+ padding: var(--taskon-spacing-sm) var(--taskon-spacing-md);
1789
+ border-bottom: 1px solid var(--taskon-color-border);
1602
1790
  transition: background-color 0.2s ease;
1603
1791
  }
1604
1792
 
@@ -1607,7 +1795,7 @@
1607
1795
  }
1608
1796
 
1609
1797
  .taskon-points-list__row:hover {
1610
- background-color: var(--taskon-color-bg-hover, #f3f4f6);
1798
+ background-color: var(--taskon-color-bg-surface-strong);
1611
1799
  }
1612
1800
 
1613
1801
  .taskon-points-list__cell {
@@ -1630,23 +1818,23 @@
1630
1818
  }
1631
1819
 
1632
1820
  .taskon-points-list__cell--amount.positive {
1633
- color: var(--taskon-color-success, #10b981);
1821
+ color: var(--taskon-color-success);
1634
1822
  }
1635
1823
 
1636
1824
  .taskon-points-list__cell--amount.negative {
1637
- color: var(--taskon-color-error, #ef4444);
1825
+ color: var(--taskon-color-error);
1638
1826
  }
1639
1827
 
1640
1828
  .taskon-points-list__cell--time {
1641
1829
  font-size: 13px;
1642
- color: var(--taskon-color-text-secondary, #6b7280);
1830
+ color: var(--taskon-color-text-secondary);
1643
1831
  white-space: nowrap;
1644
1832
  }
1645
1833
 
1646
1834
  .taskon-points-list__primary {
1647
1835
  font-size: 14px;
1648
1836
  font-weight: 500;
1649
- color: var(--taskon-color-text, #1f2937);
1837
+ color: var(--taskon-color-text);
1650
1838
  white-space: nowrap;
1651
1839
  overflow: hidden;
1652
1840
  text-overflow: ellipsis;
@@ -1654,7 +1842,7 @@
1654
1842
 
1655
1843
  .taskon-points-list__secondary {
1656
1844
  font-size: 12px;
1657
- color: var(--taskon-color-text-secondary, #6b7280);
1845
+ color: var(--taskon-color-text-secondary);
1658
1846
  white-space: nowrap;
1659
1847
  overflow: hidden;
1660
1848
  text-overflow: ellipsis;
@@ -1663,22 +1851,22 @@
1663
1851
  .taskon-points-list__loading-more {
1664
1852
  display: flex;
1665
1853
  justify-content: center;
1666
- padding: var(--taskon-spacing-md, 16px);
1854
+ padding: var(--taskon-spacing-md);
1667
1855
  }
1668
1856
 
1669
1857
  .taskon-points-list__table-wrap {
1670
- margin-top: var(--taskon-spacing-md, 16px);
1858
+ margin-top: var(--taskon-spacing-md);
1671
1859
  }
1672
1860
 
1673
1861
  .taskon-points-list__name {
1674
1862
  font-size: 14px;
1675
1863
  font-weight: 500;
1676
- color: var(--taskon-color-text, #1f2937);
1864
+ color: var(--taskon-color-text);
1677
1865
  }
1678
1866
 
1679
1867
  .taskon-points-list__time {
1680
1868
  font-size: 13px;
1681
- color: var(--taskon-color-text-secondary, #6b7280);
1869
+ color: var(--taskon-color-text-secondary);
1682
1870
  white-space: nowrap;
1683
1871
  }
1684
1872
 
@@ -1703,11 +1891,54 @@
1703
1891
  }
1704
1892
 
1705
1893
  .taskon-points-list__amount-value--positive {
1706
- color: var(--taskon-color-success, #10b981);
1894
+ color: var(--taskon-color-success);
1707
1895
  }
1708
1896
 
1709
1897
  .taskon-points-list__amount-value--negative {
1710
- color: var(--taskon-color-error, #ef4444);
1898
+ color: var(--taskon-color-error);
1899
+ }
1900
+
1901
+ @media (max-width: 750px) {
1902
+ .taskon-points-list__header {
1903
+ align-items: flex-start;
1904
+ flex-wrap: wrap;
1905
+ gap: var(--taskon-spacing-xs);
1906
+ margin-bottom: var(--taskon-spacing-sm);
1907
+ }
1908
+
1909
+ .taskon-points-list__icon {
1910
+ width: 28px;
1911
+ height: 28px;
1912
+ }
1913
+
1914
+ .taskon-points-list__title {
1915
+ font-size: 14px;
1916
+ line-height: 20px;
1917
+ }
1918
+
1919
+ .taskon-points-list__total {
1920
+ justify-content: flex-end;
1921
+ margin-left: 0;
1922
+ width: 100%;
1923
+ }
1924
+
1925
+ .taskon-points-list__total-value {
1926
+ font-size: 16px;
1927
+ }
1928
+
1929
+ .taskon-points-list__name,
1930
+ .taskon-points-list__amount-value {
1931
+ font-size: 13px;
1932
+ }
1933
+
1934
+ .taskon-points-list__time {
1935
+ font-size: 12px;
1936
+ }
1937
+
1938
+ .taskon-points-list__amount-icon {
1939
+ width: 16px;
1940
+ height: 16px;
1941
+ }
1711
1942
  }
1712
1943
  /**
1713
1944
  * AssetImage 组件样式
@@ -1730,7 +1961,7 @@
1730
1961
  width: 100%;
1731
1962
  height: 100%;
1732
1963
  border-radius: 4px;
1733
- background-color: var(--taskon-bg-secondary, #f0f0f0);
1964
+ background-color: var(--taskon-color-bg-surface-subtle);
1734
1965
  }
1735
1966
 
1736
1967
  .taskon-asset-image__chain {
@@ -1740,8 +1971,8 @@
1740
1971
  width: 18px;
1741
1972
  height: 18px;
1742
1973
  border-radius: 50%;
1743
- background-color: var(--taskon-bg-primary, #fff);
1744
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
1974
+ background-color: var(--taskon-color-bg-surface);
1975
+ box-shadow: 0 1px 2px var(--taskon-color-border-secondary);
1745
1976
  }
1746
1977
  /**
1747
1978
  * RewardTables 通用样式
@@ -1752,8 +1983,9 @@
1752
1983
  }
1753
1984
 
1754
1985
  /* Campaign 名称 */
1986
+
1755
1987
  .taskon-reward-table__campaign-name {
1756
- color: var(--taskon-color-text, #fff);
1988
+ color: var(--taskon-color-text);
1757
1989
  font-size: 14px;
1758
1990
  font-weight: 500;
1759
1991
  line-height: 1.5;
@@ -1761,32 +1993,36 @@
1761
1993
  }
1762
1994
 
1763
1995
  /* Role 名称 */
1996
+
1764
1997
  .taskon-reward-table__role-name {
1765
- color: var(--taskon-color-text, #fff);
1998
+ color: var(--taskon-color-text);
1766
1999
  font-size: 14px;
1767
2000
  font-weight: 500;
1768
2001
  line-height: 1.5;
1769
2002
  }
1770
2003
 
1771
2004
  /* 时间 */
2005
+
1772
2006
  .taskon-reward-table__time {
1773
- color: var(--taskon-text-secondary, #666);
2007
+ color: var(--taskon-color-text-secondary);
1774
2008
  font-size: 13px;
1775
2009
  white-space: nowrap;
1776
2010
  }
1777
2011
 
1778
2012
  /* 手动发放状态 */
2013
+
1779
2014
  .taskon-reward-table__manual-drop {
1780
- color: var(--taskon-text-tertiary, #999);
2015
+ color: var(--taskon-color-text-tertiary);
1781
2016
  font-size: 13px;
1782
2017
  }
1783
2018
 
1784
2019
  /* 链接样式 */
2020
+
1785
2021
  .taskon-reward-table__link {
1786
2022
  background: none;
1787
2023
  border: none;
1788
2024
  padding: 0;
1789
- color: var(--taskon-primary, #6366f1);
2025
+ color: var(--taskon-color-primary);
1790
2026
  font-size: 13px;
1791
2027
  cursor: pointer;
1792
2028
  text-decoration: none;
@@ -1797,14 +2033,15 @@
1797
2033
  }
1798
2034
 
1799
2035
  /* Claim 按钮 */
2036
+
1800
2037
  .taskon-reward-table__claim-btn {
1801
2038
  display: inline-flex;
1802
2039
  align-items: center;
1803
2040
  justify-content: center;
1804
2041
  height: 28px;
1805
2042
  padding: 0 12px;
1806
- background-color: var(--taskon-primary, #6366f1);
1807
- color: #fff;
2043
+ background-color: var(--taskon-color-primary);
2044
+ color: var(--taskon-color-text-on-primary);
1808
2045
  font-size: 13px;
1809
2046
  font-weight: 500;
1810
2047
  border: none;
@@ -1814,10 +2051,11 @@
1814
2051
  }
1815
2052
 
1816
2053
  .taskon-reward-table__claim-btn:hover {
1817
- background-color: var(--taskon-primary-hover, #4f46e5);
2054
+ background-color: var(--taskon-color-primary-hover);
1818
2055
  }
1819
2056
 
1820
2057
  /* Points 表格特殊样式 */
2058
+
1821
2059
  .taskon-reward-table__points-name {
1822
2060
  display: flex;
1823
2061
  align-items: center;
@@ -1837,11 +2075,11 @@
1837
2075
  }
1838
2076
 
1839
2077
  .taskon-reward-table__points-amount--positive {
1840
- color: var(--taskon-success, #22c55e);
2078
+ color: var(--taskon-color-success);
1841
2079
  }
1842
2080
 
1843
2081
  .taskon-reward-table__points-amount--negative {
1844
- color: var(--taskon-error, #ef4444);
2082
+ color: var(--taskon-color-error);
1845
2083
  }
1846
2084
  /**
1847
2085
  * TokenHistoryTable 表格样式
@@ -1852,6 +2090,7 @@
1852
2090
  /* ========== Token History 表格样式 ========== */
1853
2091
 
1854
2092
  /* Amount 列容器 */
2093
+
1855
2094
  .taskon-token-history__amount {
1856
2095
  display: flex;
1857
2096
  flex-direction: column;
@@ -1860,6 +2099,7 @@
1860
2099
  }
1861
2100
 
1862
2101
  /* Token 信息行 */
2102
+
1863
2103
  .taskon-token-history__token-info {
1864
2104
  display: flex;
1865
2105
  align-items: center;
@@ -1867,17 +2107,20 @@
1867
2107
  }
1868
2108
 
1869
2109
  /* Token 金额值 */
2110
+
1870
2111
  .taskon-token-history__token-value {
1871
- color: var(--taskon-success, #22c55e);
2112
+ color: var(--taskon-color-success);
1872
2113
  font-weight: 500;
1873
2114
  }
1874
2115
 
1875
2116
  /* Token 名称 */
2117
+
1876
2118
  .taskon-token-history__token-name {
1877
- color: var(--taskon-color-text, #fff);
2119
+ color: var(--taskon-color-text);
1878
2120
  }
1879
2121
 
1880
2122
  /* 链图标 */
2123
+
1881
2124
  .taskon-token-history__chain-icon {
1882
2125
  width: 18px;
1883
2126
  height: 18px;
@@ -1886,6 +2129,7 @@
1886
2129
  }
1887
2130
 
1888
2131
  /* 分发方信息 */
2132
+
1889
2133
  .taskon-token-history__distribute {
1890
2134
  display: flex;
1891
2135
  align-items: center;
@@ -1893,6 +2137,7 @@
1893
2137
  }
1894
2138
 
1895
2139
  /* Deposited 标签（TaskOn 托管发放） */
2140
+
1896
2141
  .taskon-token-history__deposited {
1897
2142
  font-size: 12px;
1898
2143
  line-height: 15px;
@@ -1903,6 +2148,7 @@
1903
2148
  }
1904
2149
 
1905
2150
  /* Distributed by 容器 */
2151
+
1906
2152
  .taskon-token-history__distributed-by {
1907
2153
  display: flex;
1908
2154
  align-items: center;
@@ -1910,13 +2156,15 @@
1910
2156
  }
1911
2157
 
1912
2158
  /* Distributed by 标签 */
2159
+
1913
2160
  .taskon-token-history__distributed-label {
1914
- color: var(--taskon-text-tertiary, #999);
2161
+ color: var(--taskon-color-text-tertiary);
1915
2162
  font-size: 12px;
1916
2163
  line-height: 15px;
1917
2164
  }
1918
2165
 
1919
2166
  /* 社区头像 */
2167
+
1920
2168
  .taskon-token-history__community-avatar {
1921
2169
  width: 14px;
1922
2170
  height: 14px;
@@ -1930,12 +2178,14 @@
1930
2178
  */
1931
2179
 
1932
2180
  /* ========== 自定义触发器样式 ========== */
2181
+
1933
2182
  .taskon-token-select__label .taskon-select__trigger-icon {
1934
2183
  width: 16px;
1935
2184
  height: 16px;
1936
2185
  }
1937
2186
 
1938
2187
  /* ========== 链信息 ========== */
2188
+
1939
2189
  .taskon-token-select__chain-info {
1940
2190
  display: inline-flex;
1941
2191
  align-items: center;
@@ -1955,7 +2205,7 @@
1955
2205
  .taskon-token-select__chain-label {
1956
2206
  font-size: 14px;
1957
2207
  font-weight: 500;
1958
- color: rgba(255, 255, 255, 0.8);
2208
+ color: var(--taskon-color-text);
1959
2209
  overflow: hidden;
1960
2210
  text-overflow: ellipsis;
1961
2211
  white-space: nowrap;
@@ -1963,14 +2213,16 @@
1963
2213
  }
1964
2214
 
1965
2215
  /* ========== 余额显示 ========== */
2216
+
1966
2217
  .taskon-token-select__balance {
1967
2218
  font-size: 14px;
1968
- color: rgba(255, 255, 255, 0.6);
2219
+ color: var(--taskon-color-text-tertiary);
1969
2220
  margin-left: auto;
1970
2221
  flex-shrink: 0;
1971
2222
  }
1972
2223
 
1973
2224
  /* ========== 响应式 ========== */
2225
+
1974
2226
  @media (max-width: 750px) {
1975
2227
  .taskon-token-select__chain-icon {
1976
2228
  width: 14px;
@@ -1995,28 +2247,31 @@
1995
2247
  */
1996
2248
 
1997
2249
  /* ========== 根容器 ========== */
2250
+
1998
2251
  .taskon-receiver-address {
1999
2252
  display: flex;
2000
2253
  align-items: center;
2001
- gap: 8px;
2254
+ gap: var(--taskon-spacing-sm);
2002
2255
  font-size: 14px;
2003
2256
  }
2004
2257
 
2005
2258
  /* ========== 链信息 ========== */
2259
+
2006
2260
  .taskon-receiver-address__chain {
2007
2261
  display: flex;
2008
2262
  align-items: center;
2009
- gap: 8px;
2263
+ gap: var(--taskon-spacing-sm);
2010
2264
  flex: 1;
2011
2265
  height: 46px;
2012
- padding: 12px 20px;
2013
- background: #121414;
2014
- border-radius: 8px;
2266
+ padding: var(--taskon-spacing-sm) var(--taskon-spacing-md);
2267
+ background: var(--taskon-color-bg-inset);
2268
+ border-radius: var(--taskon-border-radius);
2015
2269
  font-weight: 500;
2016
- color: #fff;
2270
+ color: var(--taskon-color-text);
2017
2271
  }
2018
2272
 
2019
2273
  /* ========== 链图标 ========== */
2274
+
2020
2275
  .taskon-receiver-address__chain-icon {
2021
2276
  width: 20px;
2022
2277
  height: 20px;
@@ -2025,6 +2280,7 @@
2025
2280
  }
2026
2281
 
2027
2282
  /* ========== 链名称 ========== */
2283
+
2028
2284
  .taskon-receiver-address__chain-label {
2029
2285
  overflow: hidden;
2030
2286
  text-overflow: ellipsis;
@@ -2032,14 +2288,15 @@
2032
2288
  }
2033
2289
 
2034
2290
  /* ========== 地址 ========== */
2291
+
2035
2292
  .taskon-receiver-address__address {
2036
2293
  flex: 1;
2037
2294
  height: 46px;
2038
- padding: 12px 20px;
2039
- background: #121414;
2040
- border-radius: 8px;
2295
+ padding: var(--taskon-spacing-sm) var(--taskon-spacing-md);
2296
+ background: var(--taskon-color-bg-inset);
2297
+ border-radius: var(--taskon-border-radius);
2041
2298
  font-weight: 500;
2042
- color: #fff;
2299
+ color: var(--taskon-color-text);
2043
2300
  display: flex;
2044
2301
  align-items: center;
2045
2302
  overflow: hidden;
@@ -2048,10 +2305,11 @@
2048
2305
  }
2049
2306
 
2050
2307
  /* ========== 响应式 ========== */
2308
+
2051
2309
  @media (max-width: 750px) {
2052
2310
  .taskon-receiver-address {
2053
2311
  flex-direction: column;
2054
- gap: 8px;
2312
+ gap: var(--taskon-spacing-sm);
2055
2313
  }
2056
2314
 
2057
2315
  .taskon-receiver-address__chain,
@@ -2094,11 +2352,13 @@
2094
2352
  }
2095
2353
 
2096
2354
  /* 表格紧凑模式下的行高调整 */
2355
+
2097
2356
  .taskon-batch-token-table__table .taskon-table__row {
2098
2357
  height: 55px;
2099
2358
  }
2100
2359
 
2101
2360
  /* 表头样式 */
2361
+
2102
2362
  .taskon-batch-token-table__table .taskon-table__header {
2103
2363
  font-size: 14px;
2104
2364
  line-height: 32px;
@@ -2106,6 +2366,7 @@
2106
2366
  }
2107
2367
 
2108
2368
  /* 单元格样式 */
2369
+
2109
2370
  .taskon-batch-token-table__table .taskon-table__cell {
2110
2371
  font-size: 14px;
2111
2372
  line-height: 20px;
@@ -2216,21 +2477,24 @@
2216
2477
  */
2217
2478
 
2218
2479
  /* ========== 根容器 ========== */
2480
+
2219
2481
  .taskon-withdraw-form-init {
2220
2482
  display: flex;
2221
2483
  flex-direction: column;
2222
2484
  }
2223
2485
 
2224
2486
  /* ========== 标题 ========== */
2487
+
2225
2488
  .taskon-withdraw-form-init__title {
2226
2489
  margin: 0 0 20px 0;
2227
2490
  font-size: 22px;
2228
2491
  font-weight: 600;
2229
- color: #fff;
2492
+ color: var(--taskon-color-text);
2230
2493
  line-height: 1.3;
2231
2494
  }
2232
2495
 
2233
2496
  /* ========== 表单内容 ========== */
2497
+
2234
2498
  .taskon-withdraw-form-init__content {
2235
2499
  display: flex;
2236
2500
  flex-direction: column;
@@ -2238,12 +2502,14 @@
2238
2502
  }
2239
2503
 
2240
2504
  /* ========== 批量提现开关 ========== */
2505
+
2241
2506
  .taskon-withdraw-form-init__switch-wrap {
2242
2507
  display: flex;
2243
2508
  align-items: center;
2244
2509
  }
2245
2510
 
2246
2511
  /* ========== 底部按钮 ========== */
2512
+
2247
2513
  .taskon-withdraw-form-init__footer {
2248
2514
  margin-top: 24px;
2249
2515
  }
@@ -2253,6 +2519,7 @@
2253
2519
  }
2254
2520
 
2255
2521
  /* ========== 响应式 ========== */
2522
+
2256
2523
  @media (max-width: 750px) {
2257
2524
  .taskon-withdraw-form-init__title {
2258
2525
  font-size: 5.867vw;
@@ -2276,103 +2543,112 @@
2276
2543
  * https://www.figma.com/design/T64H4qwU5lDTTpT8lSMO5n/Taskon-2.0?node-id=4000-1693
2277
2544
  */
2278
2545
 
2279
- /* ========== UserCenter 专用 CSS 变量 ========== */
2280
- :root {
2281
- /* UserCenter 暗色模式颜色系统 */
2282
- --taskon-uc-color-bg-body: #0d0d0d;
2283
- --taskon-uc-color-bg-card: linear-gradient(
2284
- 90deg,
2285
- rgba(255, 255, 255, 0.1) 0%,
2286
- rgba(255, 255, 255, 0.1) 100%
2287
- ), #0d0d0d;
2288
-
2289
- /* 文字颜色层级 */
2290
- --taskon-uc-color-text-lightest: #ffffff;
2291
- --taskon-uc-color-text-light: rgba(255, 255, 255, 0.6);
2292
- --taskon-uc-color-text-dark: rgba(255, 255, 255, 0.4);
2293
- --taskon-uc-color-text-darkest: rgba(255, 255, 255, 0.1);
2294
- --taskon-uc-color-text-invisible: rgba(255, 255, 255, 0.04);
2295
-
2296
- /* 边框颜色 */
2297
- --taskon-uc-color-border: rgba(255, 255, 255, 0.04);
2298
- --taskon-uc-color-border-btn: rgba(255, 255, 255, 0.1);
2299
-
2300
- /* 强调色 */
2301
- --taskon-uc-color-link: var(--taskon-color-link, #ffd465);
2302
-
2303
- /* 间距系统 (基于 Figma) */
2304
- --taskon-uc-spacing-xxs: 4px;
2305
- --taskon-uc-spacing-xs: 8px;
2306
- --taskon-uc-spacing-s: 12px;
2307
- --taskon-uc-spacing-m: 16px;
2308
- --taskon-uc-spacing-l: 20px;
2309
- --taskon-uc-spacing-xl: 24px;
2310
- --taskon-uc-spacing-xxl: 32px;
2311
- --taskon-uc-spacing-3xl: 40px;
2312
-
2313
- /* 圆角系统 */
2314
- --taskon-uc-radius-s: 4px;
2315
- --taskon-uc-radius-m: 6px;
2316
- --taskon-uc-radius-l: 8px;
2317
- }
2318
-
2319
2546
  /* ========== 容器 ========== */
2547
+
2320
2548
  .taskon-user-center {
2321
2549
  display: flex;
2322
2550
  flex-direction: column;
2323
- gap: var(--taskon-uc-spacing-xl, 24px);
2324
- color: var(--taskon-uc-color-text-lightest, #ffffff);
2325
- background-color: var(--taskon-uc-color-bg-body, #0d0d0d);
2326
- border-radius: var(--taskon-border-radius, 12px);
2327
- padding: var(--taskon-spacing-lg, 24px);
2551
+ gap: var(--taskon-spacing-lg);
2552
+ color: var(--taskon-color-text);
2553
+ background-color: var(--taskon-color-bg-canvas);
2554
+ border-radius: var(--taskon-border-radius);
2555
+ padding: var(--taskon-spacing-lg);
2328
2556
  }
2329
2557
 
2330
2558
  .taskon-user-center--error {
2331
- border: 1px solid var(--taskon-color-error, #ef4444);
2559
+ border: 1px solid var(--taskon-color-error);
2332
2560
  }
2333
2561
 
2334
2562
  /* 旧 Tab 栏样式已移除，使用通用 Tabs 组件 */
2335
2563
 
2336
2564
  /* ========== 内容区域 ========== */
2565
+
2337
2566
  .taskon-user-center-content {
2338
2567
  min-height: 200px;
2339
2568
  }
2340
2569
 
2570
+ /* ========== UserCenter 作用域下的共享 Table 主题覆盖 ========== */
2571
+
2572
+ .taskon-user-center .taskon-table__header {
2573
+ color: var(--taskon-color-text-secondary);
2574
+ background-color: var(--taskon-color-bg-surface-subtle);
2575
+ }
2576
+
2577
+ .taskon-user-center .taskon-table--bordered .taskon-table__row td {
2578
+ border-top: 1px solid var(--taskon-color-border-secondary);
2579
+ border-bottom: 1px solid var(--taskon-color-border-secondary);
2580
+ }
2581
+
2582
+ .taskon-user-center .taskon-table__row:hover {
2583
+ background-color: var(--taskon-color-bg-surface-strong);
2584
+ }
2585
+
2586
+ .taskon-user-center .taskon-table--striped .taskon-table__row:nth-child(even) {
2587
+ background-color: var(--taskon-color-bg-surface-subtle);
2588
+ }
2589
+
2590
+ .taskon-user-center .taskon-table__row--highlighted,
2591
+ .taskon-user-center .taskon-table__row--highlighted:hover {
2592
+ background-color: var(--taskon-color-primary-bg);
2593
+ }
2594
+
2595
+ .taskon-user-center .taskon-table__cell,
2596
+ .taskon-user-center .taskon-table__empty-title {
2597
+ color: var(--taskon-color-text);
2598
+ }
2599
+
2600
+ .taskon-user-center .taskon-table__loading,
2601
+ .taskon-user-center .taskon-table__empty,
2602
+ .taskon-user-center .taskon-table__empty-desc {
2603
+ color: var(--taskon-color-text-disabled);
2604
+ }
2605
+
2606
+ .taskon-user-center .taskon-table__loading-spinner {
2607
+ border: 2px solid var(--taskon-color-border);
2608
+ border-top-color: var(--taskon-color-primary);
2609
+ }
2610
+
2611
+ .taskon-user-center .taskon-table__loading-overlay {
2612
+ background-color: var(--taskon-color-bg-mask);
2613
+ }
2614
+
2341
2615
  /* ========== 空状态 ========== */
2616
+
2342
2617
  .taskon-user-center-empty {
2343
2618
  display: flex;
2344
2619
  flex-direction: column;
2345
2620
  align-items: center;
2346
2621
  justify-content: center;
2347
- padding: var(--taskon-uc-spacing-3xl, 40px);
2622
+ padding: var(--taskon-spacing-xl);
2348
2623
  text-align: center;
2349
2624
  }
2350
2625
 
2351
2626
  .taskon-user-center-empty__icon {
2352
- margin-bottom: var(--taskon-uc-spacing-m, 16px);
2353
- color: var(--taskon-uc-color-text-dark, rgba(255, 255, 255, 0.4));
2627
+ margin-bottom: var(--taskon-spacing-md);
2628
+ color: var(--taskon-color-text-disabled);
2354
2629
  }
2355
2630
 
2356
2631
  .taskon-user-center-empty__message {
2357
2632
  font-size: 14px;
2358
- color: var(--taskon-uc-color-text-dark, rgba(255, 255, 255, 0.4));
2633
+ color: var(--taskon-color-text-disabled);
2359
2634
  margin: 0;
2360
2635
  }
2361
2636
 
2362
2637
  /* ========== 加载状态 ========== */
2638
+
2363
2639
  .taskon-user-center-loading {
2364
2640
  display: flex;
2365
2641
  flex-direction: column;
2366
2642
  align-items: center;
2367
2643
  justify-content: center;
2368
- padding: var(--taskon-uc-spacing-3xl, 40px);
2644
+ padding: var(--taskon-spacing-xl);
2369
2645
  }
2370
2646
 
2371
2647
  .taskon-user-center-loading__spinner {
2372
2648
  width: 32px;
2373
2649
  height: 32px;
2374
- border: 3px solid var(--taskon-uc-color-text-darkest, rgba(255, 255, 255, 0.1));
2375
- border-top-color: var(--taskon-uc-color-text-lightest, #ffffff);
2650
+ border: 3px solid var(--taskon-color-border);
2651
+ border-top-color: var(--taskon-color-text);
2376
2652
  border-radius: 50%;
2377
2653
  animation: taskon-spin 1s linear infinite;
2378
2654
  }
@@ -2384,18 +2660,19 @@
2384
2660
  }
2385
2661
 
2386
2662
  .taskon-user-center-loading__message {
2387
- margin-top: var(--taskon-uc-spacing-m, 16px);
2663
+ margin-top: var(--taskon-spacing-md);
2388
2664
  font-size: 14px;
2389
- color: var(--taskon-uc-color-text-dark, rgba(255, 255, 255, 0.4));
2665
+ color: var(--taskon-color-text-disabled);
2390
2666
  }
2391
2667
 
2392
2668
  /* ========== 分页器 (基于 Figma 设计) ========== */
2669
+
2393
2670
  .taskon-user-center-pagination {
2394
2671
  display: flex;
2395
2672
  align-items: center;
2396
2673
  justify-content: center;
2397
- gap: var(--taskon-uc-spacing-m, 16px);
2398
- margin-top: var(--taskon-uc-spacing-3xl, 40px);
2674
+ gap: var(--taskon-spacing-md);
2675
+ margin-top: var(--taskon-spacing-xl);
2399
2676
  }
2400
2677
 
2401
2678
  .taskon-user-center-pagination__arrow {
@@ -2407,7 +2684,7 @@
2407
2684
  background: transparent;
2408
2685
  border: none;
2409
2686
  cursor: pointer;
2410
- color: var(--taskon-uc-color-text-lightest, #ffffff);
2687
+ color: var(--taskon-color-text);
2411
2688
  transition: opacity 0.2s ease;
2412
2689
  }
2413
2690
 
@@ -2424,60 +2701,63 @@
2424
2701
  .taskon-user-center-pagination__info {
2425
2702
  font-size: 16px;
2426
2703
  font-weight: 400;
2427
- color: var(--taskon-uc-color-text-lightest, #ffffff);
2704
+ color: var(--taskon-color-text);
2428
2705
  text-transform: capitalize;
2429
2706
  }
2430
2707
 
2431
2708
  .taskon-user-center-pagination__info-current {
2432
- color: var(--taskon-uc-color-text-lightest, #ffffff);
2709
+ color: var(--taskon-color-text);
2433
2710
  }
2434
2711
 
2435
2712
  .taskon-user-center-pagination__info-total {
2436
- color: var(--taskon-uc-color-text-dark, rgba(255, 255, 255, 0.4));
2713
+ color: var(--taskon-color-text-disabled);
2437
2714
  }
2438
2715
 
2439
2716
  .taskon-user-center-pagination__info {
2440
2717
  font-size: 14px;
2441
- color: var(--taskon-color-text-secondary, #6b7280);
2718
+ color: var(--taskon-color-text-secondary);
2442
2719
  }
2443
2720
 
2444
2721
  /* ========== 错误状态 ========== */
2722
+
2445
2723
  .taskon-user-center-error {
2446
2724
  display: flex;
2447
2725
  flex-direction: column;
2448
2726
  align-items: center;
2449
2727
  justify-content: center;
2450
- padding: var(--taskon-spacing-xl, 48px);
2728
+ padding: var(--taskon-spacing-xl);
2451
2729
  text-align: center;
2452
2730
  }
2453
2731
 
2454
2732
  .taskon-user-center-error__message {
2455
2733
  font-size: 14px;
2456
- color: var(--taskon-color-error, #ef4444);
2457
- margin-bottom: var(--taskon-spacing-md, 16px);
2734
+ color: var(--taskon-color-error);
2735
+ margin-bottom: var(--taskon-spacing-md);
2458
2736
  }
2459
2737
 
2460
2738
  .taskon-user-center-error__retry {
2461
- padding: var(--taskon-spacing-sm, 8px) var(--taskon-spacing-lg, 24px);
2739
+ padding: var(--taskon-spacing-sm) var(--taskon-spacing-lg);
2462
2740
  font-size: 14px;
2463
- color: #ffffff;
2464
- background-color: var(--taskon-color-primary, #3b82f6);
2741
+ color: var(--taskon-color-text-on-primary);
2742
+ background-color: var(--taskon-color-primary);
2465
2743
  border: none;
2466
- border-radius: var(--taskon-border-radius-sm, 6px);
2744
+ border-radius: var(--taskon-border-radius-sm);
2467
2745
  cursor: pointer;
2468
2746
  transition: background-color 0.2s ease;
2469
2747
  }
2470
2748
 
2471
2749
  .taskon-user-center-error__retry:hover {
2472
- background-color: var(--taskon-color-primary-dark, #2563eb);
2750
+ background-color: var(--taskon-color-primary-active);
2473
2751
  }
2474
2752
 
2475
2753
  /* ========== Activity History ========== */
2754
+
2476
2755
  .taskon-activity-history {
2477
2756
  width: 100%;
2478
2757
  }
2479
2758
 
2480
2759
  /* 自定义单元格样式（配合公共 Table 组件使用） */
2760
+
2481
2761
  .taskon-activity-history__name-cell {
2482
2762
  display: flex;
2483
2763
  flex-direction: column;
@@ -2491,44 +2771,44 @@
2491
2771
 
2492
2772
  .taskon-activity-history__cell--time {
2493
2773
  font-size: 13px;
2494
- color: var(--taskon-color-text-dark, rgba(255, 255, 255, 0.4));
2774
+ color: var(--taskon-color-text-disabled);
2495
2775
  }
2496
2776
 
2497
2777
  .taskon-activity-history__campaign-name {
2498
2778
  font-size: 14px;
2499
2779
  font-weight: 500;
2500
- color: var(--taskon-color-text-lightest, #ffffff);
2780
+ color: var(--taskon-color-text);
2501
2781
  word-break: break-word;
2502
2782
  }
2503
2783
 
2504
2784
  .taskon-activity-history__campaign-type {
2505
2785
  font-size: 12px;
2506
- color: var(--taskon-color-text-dark, rgba(255, 255, 255, 0.4));
2786
+ color: var(--taskon-color-text-disabled);
2507
2787
  padding: 2px 6px;
2508
- background-color: var(--taskon-color-bg-secondary, rgba(255, 255, 255, 0.04));
2788
+ background-color: var(--taskon-color-bg-surface-subtle);
2509
2789
  border-radius: 4px;
2510
2790
  }
2511
2791
 
2512
2792
  .taskon-activity-history__load-more {
2513
2793
  display: flex;
2514
2794
  justify-content: center;
2515
- margin-top: var(--taskon-spacing-md, 16px);
2795
+ margin-top: var(--taskon-spacing-md);
2516
2796
  }
2517
2797
 
2518
2798
  .taskon-activity-history__load-more-btn {
2519
- padding: var(--taskon-spacing-sm, 8px) var(--taskon-spacing-lg, 24px);
2799
+ padding: var(--taskon-spacing-sm) var(--taskon-spacing-lg);
2520
2800
  font-size: 14px;
2521
- color: var(--taskon-color-primary, #3b82f6);
2801
+ color: var(--taskon-color-primary);
2522
2802
  background: transparent;
2523
- border: 1px solid var(--taskon-color-primary, #3b82f6);
2524
- border-radius: var(--taskon-border-radius-sm, 6px);
2803
+ border: 1px solid var(--taskon-color-primary);
2804
+ border-radius: var(--taskon-border-radius-sm);
2525
2805
  cursor: pointer;
2526
2806
  transition: all 0.2s ease;
2527
2807
  }
2528
2808
 
2529
2809
  .taskon-activity-history__load-more-btn:hover:not(:disabled) {
2530
- background-color: var(--taskon-color-primary, #3b82f6);
2531
- color: #ffffff;
2810
+ background-color: var(--taskon-color-primary);
2811
+ color: var(--taskon-color-text-on-primary);
2532
2812
  }
2533
2813
 
2534
2814
  .taskon-activity-history__load-more-btn:disabled {
@@ -2539,24 +2819,26 @@
2539
2819
  .taskon-activity-history__loading-more {
2540
2820
  display: flex;
2541
2821
  justify-content: center;
2542
- padding: var(--taskon-spacing-md, 16px);
2822
+ padding: var(--taskon-spacing-md);
2543
2823
  }
2544
2824
 
2545
2825
  /* ========== Asset Carousel ========== */
2826
+
2546
2827
  .taskon-asset-carousel {
2547
2828
  position: relative;
2548
2829
  display: flex;
2549
2830
  flex-direction: column;
2550
- gap: var(--taskon-uc-spacing-m, 16px);
2551
- margin-bottom: var(--taskon-uc-spacing-xxl, 32px);
2831
+ gap: var(--taskon-spacing-md);
2832
+ margin-bottom: var(--taskon-spacing-xl);
2552
2833
  }
2553
2834
 
2554
2835
  /* "You have earned" 标题 */
2836
+
2555
2837
  .taskon-asset-carousel__title {
2556
2838
  font-size: 16px;
2557
2839
  font-weight: 600;
2558
2840
  line-height: 24px;
2559
- color: var(--taskon-uc-color-text-lightest, #ffffff);
2841
+ color: var(--taskon-color-text);
2560
2842
  }
2561
2843
 
2562
2844
  .taskon-asset-carousel--empty {
@@ -2566,7 +2848,7 @@
2566
2848
  .taskon-asset-carousel__container {
2567
2849
  display: flex;
2568
2850
  flex-wrap: wrap;
2569
- gap: var(--taskon-uc-spacing-s, 12px);
2851
+ gap: var(--taskon-spacing-sm);
2570
2852
  }
2571
2853
 
2572
2854
  .taskon-asset-carousel__container::-webkit-scrollbar {
@@ -2574,38 +2856,37 @@
2574
2856
  }
2575
2857
 
2576
2858
  /* 隐藏滚动箭头（改用 wrap 布局不需要箭头） */
2859
+
2577
2860
  .taskon-asset-carousel__arrow {
2578
2861
  display: none;
2579
2862
  }
2580
2863
 
2581
2864
  /* ========== Asset Card (基于 Figma 暗色模式设计) ========== */
2865
+
2582
2866
  .taskon-asset-card {
2583
2867
  display: flex;
2584
2868
  flex-direction: column;
2585
- gap: var(--taskon-uc-spacing-m, 16px);
2869
+ gap: var(--taskon-spacing-md);
2586
2870
  flex: 1 0 0;
2587
2871
  min-width: 120px;
2588
- padding: var(--taskon-uc-spacing-m, 16px);
2589
- background: linear-gradient(
2590
- 90deg,
2591
- rgba(255, 255, 255, 0.1) 0%,
2592
- rgba(255, 255, 255, 0.1) 100%
2593
- ), var(--taskon-uc-color-bg-body, #0d0d0d);
2594
- border: 1px solid var(--taskon-uc-color-border, rgba(255, 255, 255, 0.04));
2595
- border-radius: var(--taskon-uc-radius-l, 8px);
2872
+ padding: var(--taskon-spacing-md);
2873
+ background: var(--taskon-color-bg-surface-strong);
2874
+ border: 1px solid var(--taskon-color-border-secondary);
2875
+ border-radius: var(--taskon-border-radius);
2596
2876
  cursor: pointer;
2597
2877
  transition: all 0.2s ease;
2598
2878
  }
2599
2879
 
2600
2880
  .taskon-asset-card:hover {
2601
- border-color: var(--taskon-uc-color-border-btn, rgba(255, 255, 255, 0.1));
2881
+ border-color: var(--taskon-color-border);
2602
2882
  }
2603
2883
 
2604
2884
  .taskon-asset-card--selected {
2605
- border-color: var(--taskon-uc-color-text-light, rgba(255, 255, 255, 0.6));
2885
+ border-color: var(--taskon-color-text-tertiary);
2606
2886
  }
2607
2887
 
2608
2888
  /* 图标容器 - 默认深色背景 */
2889
+
2609
2890
  .taskon-asset-card__icon {
2610
2891
  display: flex;
2611
2892
  align-items: center;
@@ -2613,14 +2894,15 @@
2613
2894
  width: 48px;
2614
2895
  height: 48px;
2615
2896
  border-radius: 50%;
2616
- background-color: rgba(255, 255, 255, 0.1);
2617
- color: var(--taskon-uc-color-text-lightest, #ffffff);
2897
+ background-color: var(--taskon-color-bg-surface-strong);
2898
+ color: var(--taskon-color-text);
2618
2899
  flex-shrink: 0;
2619
2900
  }
2620
2901
 
2621
2902
  /* Whitelist 图标使用白色背景 */
2903
+
2622
2904
  .taskon-asset-card__icon--light {
2623
- background-color: rgba(255, 255, 255, 1);
2905
+ background-color: var(--taskon-color-text);
2624
2906
  }
2625
2907
 
2626
2908
  .taskon-asset-card__icon-img {
@@ -2631,60 +2913,66 @@
2631
2913
  }
2632
2914
 
2633
2915
  /* Whitelist "WL" 文字图标样式 - 基于 Figma 设计 */
2916
+
2634
2917
  .taskon-asset-card__icon-wl {
2635
2918
  font-size: 17.333px;
2636
2919
  font-weight: 900;
2637
2920
  letter-spacing: 0.6933px;
2638
- color: var(--taskon-uc-color-bg-body, #0d0d0d);
2921
+ color: var(--taskon-color-bg-canvas);
2639
2922
  line-height: 1;
2640
2923
  }
2641
2924
 
2642
2925
  /* NFT 文字图标样式 - 基于 Figma 设计 */
2926
+
2643
2927
  .taskon-asset-card__icon-nft {
2644
2928
  font-size: 12px;
2645
2929
  font-weight: 700;
2646
2930
  letter-spacing: 0.5px;
2647
- color: var(--taskon-uc-color-text-lightest, #ffffff);
2931
+ color: var(--taskon-color-text);
2648
2932
  line-height: 1;
2649
2933
  }
2650
2934
 
2651
2935
  /* 内容区域 */
2936
+
2652
2937
  .taskon-asset-card__content {
2653
2938
  display: flex;
2654
2939
  flex-direction: column;
2655
- gap: var(--taskon-uc-spacing-xxs, 4px);
2940
+ gap: var(--taskon-spacing-xs);
2656
2941
  align-items: flex-start;
2657
2942
  text-align: left;
2658
2943
  }
2659
2944
 
2660
2945
  /* 标题（如 Token, NFT） */
2946
+
2661
2947
  .taskon-asset-card__title {
2662
2948
  font-size: 14px;
2663
2949
  font-weight: 500;
2664
2950
  line-height: 20px;
2665
- color: var(--taskon-uc-color-text-dark, rgba(255, 255, 255, 0.4));
2951
+ color: var(--taskon-color-text-disabled);
2666
2952
  }
2667
2953
 
2668
2954
  /* 数值（如 $17,545） */
2955
+
2669
2956
  .taskon-asset-card__value {
2670
2957
  font-size: 20px;
2671
2958
  font-weight: 600;
2672
2959
  line-height: 28px;
2673
- color: var(--taskon-uc-color-text-lightest, #ffffff);
2960
+ color: var(--taskon-color-text);
2674
2961
  }
2675
2962
 
2676
2963
  /* ========== My Rewards Content (基于 Figma 暗色模式设计) ========== */
2964
+
2677
2965
  .taskon-my-rewards {
2678
2966
  width: 100%;
2679
2967
  display: flex;
2680
2968
  flex-direction: column;
2681
- gap: var(--taskon-uc-spacing-xxl, 32px);
2969
+ gap: var(--taskon-spacing-xl);
2682
2970
  }
2683
2971
 
2684
2972
  .taskon-my-rewards__section {
2685
2973
  display: flex;
2686
2974
  flex-direction: column;
2687
- gap: var(--taskon-uc-spacing-m, 16px);
2975
+ gap: var(--taskon-spacing-md);
2688
2976
  }
2689
2977
 
2690
2978
  .taskon-my-rewards__section:last-child {
@@ -2695,10 +2983,11 @@
2695
2983
  font-size: 16px;
2696
2984
  font-weight: 600;
2697
2985
  line-height: 24px;
2698
- color: var(--taskon-uc-color-text-lightest, #ffffff);
2986
+ color: var(--taskon-color-text);
2699
2987
  }
2700
2988
 
2701
2989
  /* ========== Token Asset List (使用通用 Table 组件) ========== */
2990
+
2702
2991
  .taskon-token-assets {
2703
2992
  width: 100%;
2704
2993
  display: flex;
@@ -2706,23 +2995,24 @@
2706
2995
  }
2707
2996
 
2708
2997
  /* ========== WithdrawPending 组件（参考 Vue 版本 WithdrawPending.vue） ========== */
2998
+
2709
2999
  .taskon-withdraw-pending {
2710
3000
  display: flex;
2711
3001
  align-items: center;
2712
3002
  justify-content: space-between;
2713
3003
  gap: 40px;
2714
3004
  padding: 12px 24px;
2715
- margin-bottom: var(--taskon-uc-spacing-xs, 8px);
2716
- background-color: rgba(0, 255, 163, 0.2);
2717
- border-radius: var(--taskon-uc-radius-s, 4px);
3005
+ margin-bottom: var(--taskon-spacing-sm);
3006
+ background-color: var(--taskon-color-secondary-bg);
3007
+ border-radius: var(--taskon-border-radius-sm);
2718
3008
  font-weight: 500;
2719
- color: var(--taskon-uc-color-text-lightest, #ffffff);
3009
+ color: var(--taskon-color-text);
2720
3010
  cursor: pointer;
2721
3011
  transition: background-color 0.2s ease;
2722
3012
  }
2723
3013
 
2724
3014
  .taskon-withdraw-pending:hover {
2725
- background-color: rgba(0, 255, 163, 0.3);
3015
+ background-color: var(--taskon-color-bg-surface-strong);
2726
3016
  }
2727
3017
 
2728
3018
  .taskon-withdraw-pending__left {
@@ -2732,43 +3022,49 @@
2732
3022
  }
2733
3023
 
2734
3024
  /* 数字徽章 */
3025
+
2735
3026
  .taskon-withdraw-pending__count {
2736
3027
  padding: 4px 8px;
2737
3028
  font-size: 14px;
2738
3029
  line-height: 1;
2739
3030
  text-align: right;
2740
3031
  white-space: nowrap;
2741
- background-color: var(--taskon-uc-color-bg-darkest, #0a0a0a);
2742
- border-radius: var(--taskon-uc-radius-s, 4px);
3032
+ background-color: var(--taskon-color-bg-inset);
3033
+ border-radius: var(--taskon-border-radius-sm);
2743
3034
  }
2744
3035
 
2745
3036
  /* 提示文字 */
3037
+
2746
3038
  .taskon-withdraw-pending__text {
2747
3039
  font-size: 16px;
2748
3040
  white-space: nowrap;
2749
3041
  }
2750
3042
 
2751
3043
  /* 箭头图标 */
3044
+
2752
3045
  .taskon-withdraw-pending__arrow {
2753
3046
  flex-shrink: 0;
2754
- color: var(--taskon-uc-color-text-lightest, #ffffff);
3047
+ color: var(--taskon-color-text);
2755
3048
  }
2756
3049
 
2757
3050
  /* Token Symbol 单元格 */
3051
+
2758
3052
  .taskon-token-assets__symbol-cell {
2759
3053
  display: flex;
2760
3054
  align-items: center;
2761
- gap: var(--taskon-uc-spacing-xs, 8px);
3055
+ gap: var(--taskon-spacing-sm);
2762
3056
  }
2763
3057
 
2764
3058
  /* Network 单元格 */
3059
+
2765
3060
  .taskon-token-assets__network-cell {
2766
3061
  display: flex;
2767
3062
  align-items: center;
2768
- gap: var(--taskon-uc-spacing-xs, 8px);
3063
+ gap: var(--taskon-spacing-sm);
2769
3064
  }
2770
3065
 
2771
3066
  /* Token 图标 */
3067
+
2772
3068
  .taskon-token-assets__token-icon {
2773
3069
  width: 24px;
2774
3070
  height: 24px;
@@ -2778,6 +3074,7 @@
2778
3074
  }
2779
3075
 
2780
3076
  /* 链图标 */
3077
+
2781
3078
  .taskon-token-assets__chain-icon {
2782
3079
  width: 24px;
2783
3080
  height: 24px;
@@ -2787,40 +3084,44 @@
2787
3084
  }
2788
3085
 
2789
3086
  /* Token 符号 */
3087
+
2790
3088
  .taskon-token-assets__symbol {
2791
3089
  font-size: 14px;
2792
3090
  font-weight: 400;
2793
3091
  line-height: normal;
2794
- color: var(--taskon-uc-color-text-lightest, #ffffff);
3092
+ color: var(--taskon-color-text);
2795
3093
  text-transform: capitalize;
2796
3094
  }
2797
3095
 
2798
3096
  /* 链名称 */
3097
+
2799
3098
  .taskon-token-assets__chain {
2800
3099
  font-size: 14px;
2801
3100
  font-weight: 400;
2802
3101
  line-height: normal;
2803
- color: var(--taskon-uc-color-text-lightest, #ffffff);
3102
+ color: var(--taskon-color-text);
2804
3103
  text-transform: capitalize;
2805
3104
  }
2806
3105
 
2807
3106
  /* 余额 */
3107
+
2808
3108
  .taskon-token-assets__balance {
2809
3109
  font-size: 14px;
2810
3110
  font-weight: 400;
2811
3111
  line-height: normal;
2812
- color: var(--taskon-uc-color-text-lightest, #ffffff);
3112
+ color: var(--taskon-color-text);
2813
3113
  text-overflow: ellipsis;
2814
3114
  overflow: hidden;
2815
3115
  white-space: nowrap;
2816
3116
  }
2817
3117
 
2818
3118
  /* 冻结资产入口按钮 */
3119
+
2819
3120
  .taskon-token-assets__frozen-btn {
2820
3121
  padding: 0;
2821
3122
  border: none;
2822
3123
  background: transparent;
2823
- color: var(--taskon-uc-color-text-lightest, #ffffff);
3124
+ color: var(--taskon-color-text);
2824
3125
  text-decoration: underline;
2825
3126
  cursor: pointer;
2826
3127
  font-size: 14px;
@@ -2828,22 +3129,24 @@
2828
3129
  }
2829
3130
 
2830
3131
  .taskon-token-assets__frozen-btn:hover {
2831
- color: var(--taskon-uc-color-text-light, rgba(255, 255, 255, 0.8));
3132
+ color: var(--taskon-color-text-secondary);
2832
3133
  }
2833
3134
 
2834
3135
  /* 提现按钮（覆盖通用 Button 样式以匹配设计） */
3136
+
2835
3137
  .taskon-token-assets__withdraw-btn {
2836
3138
  min-width: auto;
2837
- padding: var(--taskon-uc-spacing-xs, 8px) var(--taskon-uc-spacing-l, 20px) !important;
3139
+ padding: var(--taskon-spacing-sm) var(--taskon-spacing-md) !important;
2838
3140
  height: 34px !important;
2839
- border-color: var(--taskon-uc-color-border-btn, rgba(255, 255, 255, 0.1)) !important;
3141
+ border-color: var(--taskon-color-border) !important;
2840
3142
  }
2841
3143
 
2842
3144
  .taskon-token-assets__withdraw-btn:hover:not(:disabled) {
2843
- border-color: var(--taskon-uc-color-text-light, rgba(255, 255, 255, 0.6)) !important;
3145
+ border-color: var(--taskon-color-text-tertiary) !important;
2844
3146
  }
2845
3147
 
2846
3148
  /* ========== Reward Detail List ========== */
3149
+
2847
3150
  .taskon-reward-detail {
2848
3151
  width: 100%;
2849
3152
  }
@@ -2851,16 +3154,16 @@
2851
3154
  .taskon-reward-detail__list {
2852
3155
  display: flex;
2853
3156
  flex-direction: column;
2854
- border: 1px solid var(--taskon-color-border, #e5e7eb);
2855
- border-radius: var(--taskon-border-radius-sm, 6px);
3157
+ border: 1px solid var(--taskon-color-border);
3158
+ border-radius: var(--taskon-border-radius-sm);
2856
3159
  overflow: hidden;
2857
3160
  }
2858
3161
 
2859
3162
  .taskon-reward-detail__row {
2860
3163
  display: flex;
2861
3164
  align-items: center;
2862
- padding: var(--taskon-spacing-sm, 8px) var(--taskon-spacing-md, 16px);
2863
- border-bottom: 1px solid var(--taskon-color-border, #e5e7eb);
3165
+ padding: var(--taskon-spacing-sm) var(--taskon-spacing-md);
3166
+ border-bottom: 1px solid var(--taskon-color-border);
2864
3167
  transition: background-color 0.2s ease;
2865
3168
  }
2866
3169
 
@@ -2869,7 +3172,7 @@
2869
3172
  }
2870
3173
 
2871
3174
  .taskon-reward-detail__row:hover {
2872
- background-color: var(--taskon-color-bg-hover, #f3f4f6);
3175
+ background-color: var(--taskon-color-bg-surface-strong);
2873
3176
  }
2874
3177
 
2875
3178
  .taskon-reward-detail__row[role="button"] {
@@ -2877,7 +3180,7 @@
2877
3180
  }
2878
3181
 
2879
3182
  .taskon-reward-detail__row--nft {
2880
- padding: var(--taskon-spacing-md, 16px);
3183
+ padding: var(--taskon-spacing-md);
2881
3184
  }
2882
3185
 
2883
3186
  .taskon-reward-detail__cell {
@@ -2887,12 +3190,12 @@
2887
3190
 
2888
3191
  .taskon-reward-detail__cell--icon {
2889
3192
  width: 32px;
2890
- margin-right: var(--taskon-spacing-sm, 8px);
3193
+ margin-right: var(--taskon-spacing-sm);
2891
3194
  }
2892
3195
 
2893
3196
  .taskon-reward-detail__cell--nft-image {
2894
3197
  width: 60px;
2895
- margin-right: var(--taskon-spacing-md, 16px);
3198
+ margin-right: var(--taskon-spacing-md);
2896
3199
  }
2897
3200
 
2898
3201
  .taskon-reward-detail__cell--main {
@@ -2905,12 +3208,12 @@
2905
3208
 
2906
3209
  .taskon-reward-detail__cell--time {
2907
3210
  font-size: 13px;
2908
- color: var(--taskon-color-text-secondary, #6b7280);
3211
+ color: var(--taskon-color-text-secondary);
2909
3212
  white-space: nowrap;
2910
3213
  }
2911
3214
 
2912
3215
  .taskon-reward-detail__cell--action {
2913
- margin-left: var(--taskon-spacing-md, 16px);
3216
+ margin-left: var(--taskon-spacing-md);
2914
3217
  }
2915
3218
 
2916
3219
  .taskon-reward-detail__token-icon {
@@ -2923,14 +3226,14 @@
2923
3226
  .taskon-reward-detail__nft-image {
2924
3227
  width: 60px;
2925
3228
  height: 60px;
2926
- border-radius: var(--taskon-border-radius-sm, 6px);
3229
+ border-radius: var(--taskon-border-radius-sm);
2927
3230
  object-fit: cover;
2928
3231
  }
2929
3232
 
2930
3233
  .taskon-reward-detail__primary {
2931
3234
  font-size: 14px;
2932
3235
  font-weight: 500;
2933
- color: var(--taskon-color-text, #1f2937);
3236
+ color: var(--taskon-color-text);
2934
3237
  white-space: nowrap;
2935
3238
  overflow: hidden;
2936
3239
  text-overflow: ellipsis;
@@ -2938,40 +3241,41 @@
2938
3241
 
2939
3242
  .taskon-reward-detail__secondary {
2940
3243
  font-size: 12px;
2941
- color: var(--taskon-color-text-secondary, #6b7280);
3244
+ color: var(--taskon-color-text-secondary);
2942
3245
  white-space: nowrap;
2943
3246
  overflow: hidden;
2944
3247
  text-overflow: ellipsis;
2945
3248
  }
2946
3249
 
2947
3250
  .taskon-reward-detail__claim-btn {
2948
- padding: var(--taskon-spacing-xs, 4px) var(--taskon-spacing-md, 16px);
3251
+ padding: var(--taskon-spacing-xs) var(--taskon-spacing-md);
2949
3252
  font-size: 14px;
2950
3253
  font-weight: 500;
2951
- color: #ffffff;
2952
- background-color: var(--taskon-color-primary, #3b82f6);
3254
+ color: var(--taskon-color-text-on-primary);
3255
+ background-color: var(--taskon-color-primary);
2953
3256
  border: none;
2954
- border-radius: var(--taskon-border-radius-sm, 6px);
3257
+ border-radius: var(--taskon-border-radius-sm);
2955
3258
  cursor: pointer;
2956
3259
  transition: background-color 0.2s ease;
2957
3260
  }
2958
3261
 
2959
3262
  .taskon-reward-detail__claim-btn:hover {
2960
- background-color: var(--taskon-color-primary-dark, #2563eb);
3263
+ background-color: var(--taskon-color-primary-active);
2961
3264
  }
2962
3265
 
2963
3266
  .taskon-reward-detail__claimed {
2964
3267
  font-size: 14px;
2965
- color: var(--taskon-color-success, #10b981);
3268
+ color: var(--taskon-color-success);
2966
3269
  }
2967
3270
 
2968
3271
  .taskon-reward-detail__loading-more {
2969
3272
  display: flex;
2970
3273
  justify-content: center;
2971
- padding: var(--taskon-spacing-md, 16px);
3274
+ padding: var(--taskon-spacing-md);
2972
3275
  }
2973
3276
 
2974
3277
  /* ========== Withdraw Modal ========== */
3278
+
2975
3279
  .taskon-withdraw-modal {
2976
3280
  position: fixed;
2977
3281
  inset: 0;
@@ -2984,7 +3288,7 @@
2984
3288
  .taskon-withdraw-modal__overlay {
2985
3289
  position: absolute;
2986
3290
  inset: 0;
2987
- background-color: rgba(0, 0, 0, 0.5);
3291
+ background-color: var(--taskon-color-bg-mask);
2988
3292
  }
2989
3293
 
2990
3294
  .taskon-withdraw-modal__content {
@@ -2992,9 +3296,9 @@
2992
3296
  width: 90%;
2993
3297
  max-width: 400px;
2994
3298
  max-height: 90vh;
2995
- background-color: var(--taskon-color-bg, #ffffff);
2996
- border-radius: var(--taskon-border-radius, 12px);
2997
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
3299
+ background-color: var(--taskon-color-bg-surface);
3300
+ border-radius: var(--taskon-border-radius);
3301
+ box-shadow: 0 20px 25px -5px var(--taskon-color-bg-mask);
2998
3302
  overflow: hidden;
2999
3303
  display: flex;
3000
3304
  flex-direction: column;
@@ -3004,14 +3308,14 @@
3004
3308
  display: flex;
3005
3309
  align-items: center;
3006
3310
  justify-content: space-between;
3007
- padding: var(--taskon-spacing-md, 16px) var(--taskon-spacing-lg, 24px);
3008
- border-bottom: 1px solid var(--taskon-color-border, #e5e7eb);
3311
+ padding: var(--taskon-spacing-md) var(--taskon-spacing-lg);
3312
+ border-bottom: 1px solid var(--taskon-color-border);
3009
3313
  }
3010
3314
 
3011
3315
  .taskon-withdraw-modal__title {
3012
3316
  font-size: 18px;
3013
3317
  font-weight: 600;
3014
- color: var(--taskon-color-text, #1f2937);
3318
+ color: var(--taskon-color-text);
3015
3319
  margin: 0;
3016
3320
  }
3017
3321
 
@@ -3022,13 +3326,13 @@
3022
3326
  padding: 4px;
3023
3327
  background: none;
3024
3328
  border: none;
3025
- color: var(--taskon-color-text-secondary, #6b7280);
3329
+ color: var(--taskon-color-text-secondary);
3026
3330
  cursor: pointer;
3027
3331
  transition: color 0.2s ease;
3028
3332
  }
3029
3333
 
3030
3334
  .taskon-withdraw-modal__close:hover:not(:disabled) {
3031
- color: var(--taskon-color-text, #1f2937);
3335
+ color: var(--taskon-color-text);
3032
3336
  }
3033
3337
 
3034
3338
  .taskon-withdraw-modal__close:disabled {
@@ -3037,58 +3341,58 @@
3037
3341
  }
3038
3342
 
3039
3343
  .taskon-withdraw-modal__body {
3040
- padding: var(--taskon-spacing-lg, 24px);
3344
+ padding: var(--taskon-spacing-lg);
3041
3345
  overflow-y: auto;
3042
3346
  }
3043
3347
 
3044
3348
  .taskon-withdraw-modal__icon {
3045
3349
  display: flex;
3046
3350
  justify-content: center;
3047
- margin-bottom: var(--taskon-spacing-md, 16px);
3351
+ margin-bottom: var(--taskon-spacing-md);
3048
3352
  }
3049
3353
 
3050
3354
  .taskon-withdraw-modal__icon--success {
3051
- color: var(--taskon-color-success, #10b981);
3355
+ color: var(--taskon-color-success);
3052
3356
  }
3053
3357
 
3054
3358
  .taskon-withdraw-modal__icon--warning {
3055
- color: var(--taskon-color-warning, #f59e0b);
3359
+ color: var(--taskon-color-warning);
3056
3360
  }
3057
3361
 
3058
3362
  .taskon-withdraw-modal__message {
3059
3363
  font-size: 14px;
3060
- color: var(--taskon-color-text, #1f2937);
3364
+ color: var(--taskon-color-text);
3061
3365
  text-align: center;
3062
3366
  margin: 0;
3063
3367
  }
3064
3368
 
3065
3369
  .taskon-withdraw-modal__tx-hash {
3066
3370
  font-size: 12px;
3067
- color: var(--taskon-color-text-secondary, #6b7280);
3371
+ color: var(--taskon-color-text-secondary);
3068
3372
  text-align: center;
3069
- margin-top: var(--taskon-spacing-sm, 8px);
3373
+ margin-top: var(--taskon-spacing-sm);
3070
3374
  word-break: break-all;
3071
3375
  }
3072
3376
 
3073
3377
  .taskon-withdraw-modal__tokens {
3074
3378
  display: flex;
3075
3379
  flex-direction: column;
3076
- gap: var(--taskon-spacing-sm, 8px);
3380
+ gap: var(--taskon-spacing-sm);
3077
3381
  }
3078
3382
 
3079
3383
  .taskon-withdraw-modal__token-item {
3080
3384
  display: flex;
3081
3385
  align-items: center;
3082
3386
  justify-content: space-between;
3083
- padding: var(--taskon-spacing-sm, 8px) var(--taskon-spacing-md, 16px);
3084
- background-color: var(--taskon-color-bg-secondary, #f9fafb);
3085
- border-radius: var(--taskon-border-radius-sm, 6px);
3387
+ padding: var(--taskon-spacing-sm) var(--taskon-spacing-md);
3388
+ background-color: var(--taskon-color-bg-surface-subtle);
3389
+ border-radius: var(--taskon-border-radius-sm);
3086
3390
  }
3087
3391
 
3088
3392
  .taskon-withdraw-modal__token-info {
3089
3393
  display: flex;
3090
3394
  align-items: center;
3091
- gap: var(--taskon-spacing-sm, 8px);
3395
+ gap: var(--taskon-spacing-sm);
3092
3396
  }
3093
3397
 
3094
3398
  .taskon-withdraw-modal__token-icon {
@@ -3107,63 +3411,63 @@
3107
3411
  .taskon-withdraw-modal__token-symbol {
3108
3412
  font-size: 14px;
3109
3413
  font-weight: 500;
3110
- color: var(--taskon-color-text, #1f2937);
3414
+ color: var(--taskon-color-text);
3111
3415
  }
3112
3416
 
3113
3417
  .taskon-withdraw-modal__token-chain {
3114
3418
  font-size: 12px;
3115
- color: var(--taskon-color-text-secondary, #6b7280);
3419
+ color: var(--taskon-color-text-secondary);
3116
3420
  }
3117
3421
 
3118
3422
  .taskon-withdraw-modal__token-amount {
3119
3423
  font-size: 16px;
3120
3424
  font-weight: 600;
3121
- color: var(--taskon-color-text, #1f2937);
3425
+ color: var(--taskon-color-text);
3122
3426
  }
3123
3427
 
3124
3428
  .taskon-withdraw-modal__error {
3125
- margin-top: var(--taskon-spacing-md, 16px);
3126
- padding: var(--taskon-spacing-sm, 8px) var(--taskon-spacing-md, 16px);
3429
+ margin-top: var(--taskon-spacing-md);
3430
+ padding: var(--taskon-spacing-sm) var(--taskon-spacing-md);
3127
3431
  font-size: 14px;
3128
- color: var(--taskon-color-error, #ef4444);
3129
- background-color: var(--taskon-color-error-light, #fef2f2);
3130
- border-radius: var(--taskon-border-radius-sm, 6px);
3432
+ color: var(--taskon-color-error);
3433
+ background-color: var(--taskon-color-error-bg);
3434
+ border-radius: var(--taskon-border-radius-sm);
3131
3435
  }
3132
3436
 
3133
3437
  .taskon-withdraw-modal__footer {
3134
3438
  display: flex;
3135
- gap: var(--taskon-spacing-sm, 8px);
3136
- padding: var(--taskon-spacing-md, 16px) var(--taskon-spacing-lg, 24px);
3137
- border-top: 1px solid var(--taskon-color-border, #e5e7eb);
3439
+ gap: var(--taskon-spacing-sm);
3440
+ padding: var(--taskon-spacing-md) var(--taskon-spacing-lg);
3441
+ border-top: 1px solid var(--taskon-color-border);
3138
3442
  }
3139
3443
 
3140
3444
  .taskon-withdraw-modal__btn {
3141
3445
  flex: 1;
3142
- padding: var(--taskon-spacing-sm, 8px) var(--taskon-spacing-lg, 24px);
3446
+ padding: var(--taskon-spacing-sm) var(--taskon-spacing-lg);
3143
3447
  font-size: 14px;
3144
3448
  font-weight: 500;
3145
3449
  border: none;
3146
- border-radius: var(--taskon-border-radius-sm, 6px);
3450
+ border-radius: var(--taskon-border-radius-sm);
3147
3451
  cursor: pointer;
3148
3452
  transition: all 0.2s ease;
3149
3453
  }
3150
3454
 
3151
3455
  .taskon-withdraw-modal__btn--primary {
3152
- color: #ffffff;
3153
- background-color: var(--taskon-color-primary, #3b82f6);
3456
+ color: var(--taskon-color-text-on-primary);
3457
+ background-color: var(--taskon-color-primary);
3154
3458
  }
3155
3459
 
3156
3460
  .taskon-withdraw-modal__btn--primary:hover:not(:disabled) {
3157
- background-color: var(--taskon-color-primary-dark, #2563eb);
3461
+ background-color: var(--taskon-color-primary-active);
3158
3462
  }
3159
3463
 
3160
3464
  .taskon-withdraw-modal__btn--secondary {
3161
- color: var(--taskon-color-text, #1f2937);
3162
- background-color: var(--taskon-color-bg-secondary, #f9fafb);
3465
+ color: var(--taskon-color-text);
3466
+ background-color: var(--taskon-color-bg-surface-subtle);
3163
3467
  }
3164
3468
 
3165
3469
  .taskon-withdraw-modal__btn--secondary:hover:not(:disabled) {
3166
- background-color: var(--taskon-color-bg-hover, #f3f4f6);
3470
+ background-color: var(--taskon-color-bg-surface-strong);
3167
3471
  }
3168
3472
 
3169
3473
  .taskon-withdraw-modal__btn:disabled {
@@ -3175,19 +3479,20 @@
3175
3479
  display: flex;
3176
3480
  align-items: center;
3177
3481
  justify-content: center;
3178
- gap: var(--taskon-spacing-sm, 8px);
3482
+ gap: var(--taskon-spacing-sm);
3179
3483
  }
3180
3484
 
3181
3485
  .taskon-withdraw-modal__spinner {
3182
3486
  width: 16px;
3183
3487
  height: 16px;
3184
- border: 2px solid rgba(255, 255, 255, 0.3);
3185
- border-top-color: #ffffff;
3488
+ border: 2px solid var(--taskon-color-border);
3489
+ border-top-color: var(--taskon-color-text-on-primary);
3186
3490
  border-radius: 50%;
3187
3491
  animation: taskon-spin 1s linear infinite;
3188
3492
  }
3189
3493
 
3190
3494
  /* ========== Frozen Asset List ========== */
3495
+
3191
3496
  .taskon-frozen-assets {
3192
3497
  width: 100%;
3193
3498
  }
@@ -3196,13 +3501,13 @@
3196
3501
  display: flex;
3197
3502
  align-items: center;
3198
3503
  justify-content: space-between;
3199
- margin-bottom: var(--taskon-spacing-md, 16px);
3504
+ margin-bottom: var(--taskon-spacing-md);
3200
3505
  }
3201
3506
 
3202
3507
  .taskon-frozen-assets__title {
3203
3508
  font-size: 16px;
3204
3509
  font-weight: 600;
3205
- color: var(--taskon-color-text, #1f2937);
3510
+ color: var(--taskon-color-text);
3206
3511
  margin: 0;
3207
3512
  }
3208
3513
 
@@ -3213,28 +3518,28 @@
3213
3518
  padding: 4px;
3214
3519
  background: none;
3215
3520
  border: none;
3216
- color: var(--taskon-color-text-secondary, #6b7280);
3521
+ color: var(--taskon-color-text-secondary);
3217
3522
  cursor: pointer;
3218
3523
  transition: color 0.2s ease;
3219
3524
  }
3220
3525
 
3221
3526
  .taskon-frozen-assets__close:hover {
3222
- color: var(--taskon-color-text, #1f2937);
3527
+ color: var(--taskon-color-text);
3223
3528
  }
3224
3529
 
3225
3530
  .taskon-frozen-assets__list {
3226
3531
  display: flex;
3227
3532
  flex-direction: column;
3228
- gap: var(--taskon-spacing-sm, 8px);
3533
+ gap: var(--taskon-spacing-sm);
3229
3534
  }
3230
3535
 
3231
3536
  .taskon-frozen-assets__item {
3232
3537
  display: flex;
3233
3538
  align-items: center;
3234
3539
  justify-content: space-between;
3235
- padding: var(--taskon-spacing-md, 16px);
3236
- background-color: var(--taskon-color-bg-secondary, #f9fafb);
3237
- border-radius: var(--taskon-border-radius, 12px);
3540
+ padding: var(--taskon-spacing-md);
3541
+ background-color: var(--taskon-color-bg-surface-subtle);
3542
+ border-radius: var(--taskon-border-radius);
3238
3543
  }
3239
3544
 
3240
3545
  .taskon-frozen-assets__info {
@@ -3252,41 +3557,42 @@
3252
3557
  .taskon-frozen-assets__amount {
3253
3558
  font-size: 16px;
3254
3559
  font-weight: 600;
3255
- color: var(--taskon-color-text, #1f2937);
3560
+ color: var(--taskon-color-text);
3256
3561
  }
3257
3562
 
3258
3563
  .taskon-frozen-assets__type {
3259
3564
  font-size: 12px;
3260
- color: var(--taskon-color-text-secondary, #6b7280);
3565
+ color: var(--taskon-color-text-secondary);
3261
3566
  }
3262
3567
 
3263
3568
  .taskon-frozen-assets__campaign {
3264
3569
  font-size: 12px;
3265
- color: var(--taskon-color-text-secondary, #6b7280);
3570
+ color: var(--taskon-color-text-secondary);
3266
3571
  }
3267
3572
 
3268
3573
  .taskon-frozen-assets__time {
3269
3574
  font-size: 12px;
3270
- color: var(--taskon-color-text-secondary, #6b7280);
3575
+ color: var(--taskon-color-text-secondary);
3271
3576
  }
3272
3577
 
3273
3578
  .taskon-frozen-assets__resend-btn {
3274
- padding: var(--taskon-spacing-xs, 4px) var(--taskon-spacing-md, 16px);
3579
+ padding: var(--taskon-spacing-xs) var(--taskon-spacing-md);
3275
3580
  font-size: 14px;
3276
- color: var(--taskon-color-primary, #3b82f6);
3581
+ color: var(--taskon-color-primary);
3277
3582
  background: transparent;
3278
- border: 1px solid var(--taskon-color-primary, #3b82f6);
3279
- border-radius: var(--taskon-border-radius-sm, 6px);
3583
+ border: 1px solid var(--taskon-color-primary);
3584
+ border-radius: var(--taskon-border-radius-sm);
3280
3585
  cursor: pointer;
3281
3586
  transition: all 0.2s ease;
3282
3587
  }
3283
3588
 
3284
3589
  .taskon-frozen-assets__resend-btn:hover {
3285
- background-color: var(--taskon-color-primary, #3b82f6);
3286
- color: #ffffff;
3590
+ background-color: var(--taskon-color-primary);
3591
+ color: var(--taskon-color-text-on-primary);
3287
3592
  }
3288
3593
 
3289
3594
  /* ========== Progress Bar ========== */
3595
+
3290
3596
  .taskon-progress-bar {
3291
3597
  width: 100%;
3292
3598
  }
@@ -3294,14 +3600,14 @@
3294
3600
  .taskon-progress-bar__container {
3295
3601
  width: 100%;
3296
3602
  height: 8px;
3297
- background-color: var(--taskon-color-bg-secondary, #f3f4f6);
3603
+ background-color: var(--taskon-color-bg-surface-subtle);
3298
3604
  border-radius: 9999px;
3299
3605
  overflow: hidden;
3300
3606
  }
3301
3607
 
3302
3608
  .taskon-progress-bar__fill {
3303
3609
  height: 100%;
3304
- background-color: var(--taskon-color-primary, #3b82f6);
3610
+ background-color: var(--taskon-color-primary);
3305
3611
  border-radius: 9999px;
3306
3612
  transition: width 0.3s ease;
3307
3613
  }
@@ -3310,9 +3616,9 @@
3310
3616
  display: flex;
3311
3617
  justify-content: space-between;
3312
3618
  align-items: center;
3313
- margin-top: var(--taskon-spacing-xs, 4px);
3619
+ margin-top: var(--taskon-spacing-xs);
3314
3620
  font-size: 12px;
3315
- color: var(--taskon-color-text-secondary, #6b7280);
3621
+ color: var(--taskon-color-text-secondary);
3316
3622
  }
3317
3623
 
3318
3624
  .taskon-progress-bar__values {
@@ -3321,10 +3627,11 @@
3321
3627
 
3322
3628
  .taskon-progress-bar__percent {
3323
3629
  font-weight: 600;
3324
- color: var(--taskon-color-primary, #3b82f6);
3630
+ color: var(--taskon-color-primary);
3325
3631
  }
3326
3632
 
3327
3633
  /* ========== XP Level Card ========== */
3634
+
3328
3635
  .taskon-xp-level-card {
3329
3636
  width: 100%;
3330
3637
  }
@@ -3333,13 +3640,13 @@
3333
3640
  display: flex;
3334
3641
  align-items: center;
3335
3642
  justify-content: space-between;
3336
- margin-bottom: var(--taskon-spacing-md, 16px);
3643
+ margin-bottom: var(--taskon-spacing-md);
3337
3644
  }
3338
3645
 
3339
3646
  .taskon-xp-level-card__level {
3340
3647
  display: flex;
3341
3648
  align-items: center;
3342
- gap: var(--taskon-spacing-sm, 8px);
3649
+ gap: var(--taskon-spacing-sm);
3343
3650
  }
3344
3651
 
3345
3652
  .taskon-xp-level-card__level-badge {
@@ -3348,9 +3655,13 @@
3348
3655
  justify-content: center;
3349
3656
  width: 48px;
3350
3657
  height: 48px;
3351
- background: linear-gradient(135deg, var(--taskon-color-primary, #3b82f6), var(--taskon-color-primary-dark, #2563eb));
3658
+ background: linear-gradient(
3659
+ 135deg,
3660
+ var(--taskon-color-primary),
3661
+ var(--taskon-color-primary-hover)
3662
+ );
3352
3663
  border-radius: 50%;
3353
- color: #ffffff;
3664
+ color: var(--taskon-color-text-on-primary);
3354
3665
  font-size: 18px;
3355
3666
  font-weight: 700;
3356
3667
  }
@@ -3363,13 +3674,13 @@
3363
3674
 
3364
3675
  .taskon-xp-level-card__level-label {
3365
3676
  font-size: 12px;
3366
- color: var(--taskon-color-text-secondary, #6b7280);
3677
+ color: var(--taskon-color-text-secondary);
3367
3678
  }
3368
3679
 
3369
3680
  .taskon-xp-level-card__level-value {
3370
3681
  font-size: 20px;
3371
3682
  font-weight: 700;
3372
- color: var(--taskon-color-text, #1f2937);
3683
+ color: var(--taskon-color-text);
3373
3684
  }
3374
3685
 
3375
3686
  .taskon-xp-level-card__xp {
@@ -3381,33 +3692,33 @@
3381
3692
 
3382
3693
  .taskon-xp-level-card__xp-label {
3383
3694
  font-size: 12px;
3384
- color: var(--taskon-color-text-secondary, #6b7280);
3695
+ color: var(--taskon-color-text-secondary);
3385
3696
  }
3386
3697
 
3387
3698
  .taskon-xp-level-card__xp-value {
3388
3699
  font-size: 18px;
3389
3700
  font-weight: 600;
3390
- color: var(--taskon-color-text, #1f2937);
3701
+ color: var(--taskon-color-text);
3391
3702
  }
3392
3703
 
3393
3704
  .taskon-xp-level-card__progress {
3394
- margin-bottom: var(--taskon-spacing-lg, 24px);
3705
+ margin-bottom: var(--taskon-spacing-lg);
3395
3706
  }
3396
3707
 
3397
3708
  .taskon-xp-level-card__progress-label {
3398
3709
  display: flex;
3399
3710
  justify-content: space-between;
3400
3711
  align-items: center;
3401
- margin-bottom: var(--taskon-spacing-xs, 4px);
3712
+ margin-bottom: var(--taskon-spacing-xs);
3402
3713
  font-size: 12px;
3403
- color: var(--taskon-color-text-secondary, #6b7280);
3714
+ color: var(--taskon-color-text-secondary);
3404
3715
  }
3405
3716
 
3406
3717
  .taskon-xp-level-card__history-title {
3407
3718
  font-size: 16px;
3408
3719
  font-weight: 600;
3409
- color: var(--taskon-color-text, #1f2937);
3410
- margin-bottom: var(--taskon-spacing-md, 16px);
3720
+ color: var(--taskon-color-text);
3721
+ margin-bottom: var(--taskon-spacing-md);
3411
3722
  }
3412
3723
 
3413
3724
  /* ============================================================================
@@ -3417,23 +3728,23 @@
3417
3728
  .taskon-identity {
3418
3729
  display: flex;
3419
3730
  flex-direction: column;
3420
- gap: var(--taskon-uc-spacing-3xl, 40px);
3731
+ gap: var(--taskon-spacing-xl);
3421
3732
  }
3422
3733
 
3423
3734
  .taskon-identity-loading {
3424
3735
  display: flex;
3425
3736
  justify-content: center;
3426
3737
  align-items: center;
3427
- padding: var(--taskon-spacing-xl, 32px);
3428
- color: var(--taskon-uc-color-text-light, rgba(255, 255, 255, 0.6));
3738
+ padding: var(--taskon-spacing-xl);
3739
+ color: var(--taskon-color-text-tertiary);
3429
3740
  }
3430
3741
 
3431
3742
  .taskon-identity-empty {
3432
3743
  display: flex;
3433
3744
  justify-content: center;
3434
3745
  align-items: center;
3435
- padding: var(--taskon-spacing-xl, 32px);
3436
- color: var(--taskon-uc-color-text-light, rgba(255, 255, 255, 0.6));
3746
+ padding: var(--taskon-spacing-xl);
3747
+ color: var(--taskon-color-text-tertiary);
3437
3748
  font-size: 14px;
3438
3749
  }
3439
3750
 
@@ -3443,53 +3754,59 @@
3443
3754
  ============================================================================ */
3444
3755
 
3445
3756
  /* 社交账号区域 */
3757
+
3446
3758
  .taskon-identity-social-section {
3447
3759
  display: flex;
3448
3760
  flex-direction: column;
3449
- gap: var(--taskon-uc-spacing-l, 20px);
3761
+ gap: var(--taskon-spacing-md);
3450
3762
  }
3451
3763
 
3452
3764
  /* 标题: 24px 加粗白色 */
3765
+
3453
3766
  .taskon-identity-social-section__title {
3454
3767
  font-size: 24px;
3455
3768
  font-weight: 600;
3456
3769
  line-height: 32px;
3457
- color: var(--taskon-uc-color-text-lightest, #ffffff);
3770
+ color: var(--taskon-color-text);
3458
3771
  margin: 0;
3459
3772
  }
3460
3773
 
3461
3774
  /* 网格布局: 每行最多 3 个，间距 20px */
3775
+
3462
3776
  .taskon-identity-social-grid {
3463
3777
  display: flex;
3464
3778
  flex-wrap: wrap;
3465
- gap: var(--taskon-uc-spacing-l, 20px);
3779
+ gap: var(--taskon-spacing-md);
3466
3780
  }
3467
3781
 
3468
3782
  /* 社交账号卡片: 305px × 64px */
3783
+
3469
3784
  .taskon-identity-social-item {
3470
3785
  display: flex;
3471
3786
  align-items: center;
3472
3787
  justify-content: space-between;
3473
- gap: var(--taskon-uc-spacing-l, 20px);
3788
+ gap: var(--taskon-spacing-md);
3474
3789
  width: 305px;
3475
3790
  height: 64px;
3476
- padding: var(--taskon-uc-spacing-m, 16px);
3477
- background-color: var(--taskon-uc-color-text-invisible, rgba(255, 255, 255, 0.04));
3791
+ padding: var(--taskon-spacing-md);
3792
+ background-color: var(--taskon-color-bg-surface-subtle);
3478
3793
  border-radius: 10px;
3479
3794
  box-sizing: border-box;
3480
3795
  transition: background-color 0.2s ease;
3481
3796
  }
3482
3797
 
3483
3798
  .taskon-identity-social-item:hover {
3484
- background-color: rgba(255, 255, 255, 0.08);
3799
+ background-color: var(--taskon-color-bg-surface-strong);
3485
3800
  }
3486
3801
 
3487
3802
  /* 已绑定状态 - 可以添加不同的视觉反馈 */
3803
+
3488
3804
  .taskon-identity-social-item--bound {
3489
- background-color: var(--taskon-uc-color-text-invisible, rgba(255, 255, 255, 0.04));
3805
+ background-color: var(--taskon-color-bg-surface-subtle);
3490
3806
  }
3491
3807
 
3492
3808
  /* "Linked" 徽章：已绑定默认显示 */
3809
+
3493
3810
  .taskon-identity-social-item__linked {
3494
3811
  display: flex;
3495
3812
  align-items: center;
@@ -3499,14 +3816,15 @@
3499
3816
  font-size: 12px;
3500
3817
  font-weight: 500;
3501
3818
  line-height: 1;
3502
- color: var(--taskon-uc-color-text-light, rgba(255, 255, 255, 0.6));
3503
- background-color: var(--taskon-uc-color-text-darkest, rgba(255, 255, 255, 0.1));
3819
+ color: var(--taskon-color-text-tertiary);
3820
+ background-color: var(--taskon-color-border);
3504
3821
  border-radius: 4px;
3505
3822
  flex-shrink: 0;
3506
3823
  white-space: nowrap;
3507
3824
  }
3508
3825
 
3509
3826
  /* 解绑关闭按钮（✕）：默认隐藏 */
3827
+
3510
3828
  .taskon-identity-social-item__unlink-btn {
3511
3829
  display: none;
3512
3830
  align-items: center;
@@ -3514,17 +3832,17 @@
3514
3832
  width: 34px;
3515
3833
  height: 34px;
3516
3834
  padding: 0;
3517
- background-color: rgba(239, 68, 68, 0.15);
3835
+ background-color: var(--taskon-color-error-bg);
3518
3836
  border: none;
3519
- border-radius: var(--taskon-uc-radius-m, 6px);
3837
+ border-radius: var(--taskon-border-radius);
3520
3838
  cursor: pointer;
3521
3839
  flex-shrink: 0;
3522
- color: #ef4444;
3840
+ color: var(--taskon-color-error);
3523
3841
  transition: all 0.2s ease;
3524
3842
  }
3525
3843
 
3526
3844
  .taskon-identity-social-item__unlink-btn:hover:not(:disabled) {
3527
- background-color: rgba(239, 68, 68, 0.25);
3845
+ background-color: var(--taskon-color-error-bg);
3528
3846
  }
3529
3847
 
3530
3848
  .taskon-identity-social-item__unlink-btn:disabled {
@@ -3533,33 +3851,40 @@
3533
3851
  }
3534
3852
 
3535
3853
  /* hover 时切换：隐藏 Linked 徽章，显示 ✕ 按钮 */
3854
+
3536
3855
  .taskon-identity-social-item--bound:hover .taskon-identity-social-item__linked {
3537
3856
  display: none;
3538
3857
  }
3539
3858
 
3540
- .taskon-identity-social-item--bound:hover .taskon-identity-social-item__unlink-btn {
3859
+ .taskon-identity-social-item--bound:hover
3860
+ .taskon-identity-social-item__unlink-btn {
3541
3861
  display: flex;
3542
3862
  }
3543
3863
 
3544
3864
  /* 禁用解绑时（unlink-disabled），hover 不切换 */
3545
- .taskon-identity-social-item--unlink-disabled:hover .taskon-identity-social-item__linked {
3865
+
3866
+ .taskon-identity-social-item--unlink-disabled:hover
3867
+ .taskon-identity-social-item__linked {
3546
3868
  display: flex;
3547
3869
  }
3548
3870
 
3549
- .taskon-identity-social-item--unlink-disabled:hover .taskon-identity-social-item__unlink-btn {
3871
+ .taskon-identity-social-item--unlink-disabled:hover
3872
+ .taskon-identity-social-item__unlink-btn {
3550
3873
  display: none;
3551
3874
  }
3552
3875
 
3553
3876
  /* 卡片左侧内容区域 */
3877
+
3554
3878
  .taskon-identity-social-item__content {
3555
3879
  display: flex;
3556
3880
  align-items: center;
3557
- gap: var(--taskon-uc-spacing-s, 12px);
3881
+ gap: var(--taskon-spacing-sm);
3558
3882
  flex: 1;
3559
3883
  min-width: 0;
3560
3884
  }
3561
3885
 
3562
3886
  /* 图标容器: 24x24 */
3887
+
3563
3888
  .taskon-identity-social-item__icon {
3564
3889
  display: flex;
3565
3890
  align-items: center;
@@ -3575,28 +3900,31 @@
3575
3900
  }
3576
3901
 
3577
3902
  /* 文字区域 */
3903
+
3578
3904
  .taskon-identity-social-item__text {
3579
3905
  flex: 1;
3580
3906
  min-width: 0;
3581
3907
  }
3582
3908
 
3583
3909
  /* 文字样式: 16px 加粗白色 */
3910
+
3584
3911
  .taskon-identity-social-item__name {
3585
3912
  font-size: 16px;
3586
3913
  font-weight: 600;
3587
3914
  line-height: 24px;
3588
- color: var(--taskon-uc-color-text-lightest, #ffffff);
3915
+ color: var(--taskon-color-text);
3589
3916
  white-space: nowrap;
3590
3917
  overflow: hidden;
3591
3918
  text-overflow: ellipsis;
3592
3919
  }
3593
3920
 
3594
3921
  /* 链接样式 */
3922
+
3595
3923
  .taskon-identity-social-item__link {
3596
3924
  font-size: 16px;
3597
3925
  font-weight: 600;
3598
3926
  line-height: 24px;
3599
- color: var(--taskon-uc-color-text-lightest, #ffffff);
3927
+ color: var(--taskon-color-text);
3600
3928
  text-decoration: none;
3601
3929
  white-space: nowrap;
3602
3930
  overflow: hidden;
@@ -3606,28 +3934,29 @@
3606
3934
  }
3607
3935
 
3608
3936
  .taskon-identity-social-item__link:hover {
3609
- color: var(--taskon-uc-color-link, #ffd465);
3937
+ color: var(--taskon-color-link);
3610
3938
  }
3611
3939
 
3612
3940
  /* 箭头按钮: 34x34 白色背景 */
3941
+
3613
3942
  .taskon-identity-social-btn {
3614
3943
  display: flex;
3615
3944
  align-items: center;
3616
3945
  justify-content: center;
3617
3946
  width: 34px;
3618
3947
  height: 34px;
3619
- padding: var(--taskon-uc-spacing-xs, 8px);
3620
- background-color: var(--taskon-uc-color-text-lightest, #ffffff);
3948
+ padding: var(--taskon-spacing-sm);
3949
+ background-color: var(--taskon-color-text);
3621
3950
  border: none;
3622
- border-radius: var(--taskon-uc-radius-m, 6px);
3951
+ border-radius: var(--taskon-border-radius);
3623
3952
  cursor: pointer;
3624
3953
  flex-shrink: 0;
3625
- color: #000000;
3954
+ color: var(--taskon-color-text-on-primary);
3626
3955
  transition: all 0.2s ease;
3627
3956
  }
3628
3957
 
3629
3958
  .taskon-identity-social-btn:hover:not(:disabled) {
3630
- background-color: rgba(255, 255, 255, 0.9);
3959
+ background-color: var(--taskon-color-bg-floating);
3631
3960
  transform: translateX(2px);
3632
3961
  }
3633
3962
 
@@ -3642,11 +3971,12 @@
3642
3971
  }
3643
3972
 
3644
3973
  /* 加载动画 */
3974
+
3645
3975
  .taskon-identity-social-btn__spinner {
3646
3976
  width: 14px;
3647
3977
  height: 14px;
3648
- border: 2px solid rgba(0, 0, 0, 0.2);
3649
- border-top-color: #000000;
3978
+ border: 2px solid var(--taskon-color-border);
3979
+ border-top-color: var(--taskon-color-text-on-primary);
3650
3980
  border-radius: 50%;
3651
3981
  animation: taskon-spin 1s linear infinite;
3652
3982
  }
@@ -3657,22 +3987,25 @@
3657
3987
  ============================================================================ */
3658
3988
 
3659
3989
  /* Email Address 区域 */
3990
+
3660
3991
  .taskon-identity-email-section {
3661
3992
  display: flex;
3662
3993
  flex-direction: column;
3663
- gap: var(--taskon-uc-spacing-l, 20px);
3994
+ gap: var(--taskon-spacing-md);
3664
3995
  }
3665
3996
 
3666
3997
  /* 标题: 16px 加粗白色 */
3998
+
3667
3999
  .taskon-identity-email-section__title {
3668
4000
  font-size: 16px;
3669
4001
  font-weight: 600;
3670
4002
  line-height: 24px;
3671
- color: var(--taskon-uc-color-text-lightest, #ffffff);
4003
+ color: var(--taskon-color-text);
3672
4004
  margin: 0;
3673
4005
  }
3674
4006
 
3675
4007
  /* Email 卡片容器 - 单个卡片 */
4008
+
3676
4009
  .taskon-identity-email-card {
3677
4010
  display: flex;
3678
4011
  }
@@ -3683,69 +4016,78 @@
3683
4016
  ============================================================================ */
3684
4017
 
3685
4018
  /* Network List 区域 */
4019
+
3686
4020
  .taskon-network-section {
3687
4021
  display: flex;
3688
4022
  flex-direction: column;
3689
- gap: var(--taskon-uc-spacing-l, 20px);
4023
+ gap: var(--taskon-spacing-md);
3690
4024
  }
3691
4025
 
3692
4026
  /* 标题: 24px 加粗白色 */
4027
+
3693
4028
  .taskon-network-section__title {
3694
4029
  font-size: 24px;
3695
4030
  font-weight: 600;
3696
4031
  line-height: 32px;
3697
- color: var(--taskon-uc-color-text-lightest, #ffffff);
4032
+ color: var(--taskon-color-text);
3698
4033
  margin: 0;
3699
4034
  }
3700
4035
 
3701
4036
  /* 网格布局: EVM 全宽，其他链每行 2 个 */
4037
+
3702
4038
  .taskon-network-grid {
3703
4039
  display: grid;
3704
4040
  grid-template-columns: repeat(2, 1fr);
3705
- gap: var(--taskon-uc-spacing-l, 20px);
4041
+ gap: var(--taskon-spacing-md);
3706
4042
  max-width: 630px;
3707
4043
  }
3708
4044
 
3709
4045
  /* Network Card 基础样式 */
4046
+
3710
4047
  .taskon-network-card {
3711
4048
  position: relative;
3712
4049
  display: flex;
3713
4050
  flex-direction: column;
3714
- gap: var(--taskon-uc-spacing-m, 16px);
3715
- padding: var(--taskon-uc-spacing-l, 20px);
3716
- background-color: var(--taskon-uc-color-text-invisible, rgba(255, 255, 255, 0.04));
4051
+ gap: var(--taskon-spacing-md);
4052
+ padding: var(--taskon-spacing-md);
4053
+ background-color: var(--taskon-color-bg-surface-subtle);
3717
4054
  border-radius: 12px;
3718
4055
  box-sizing: border-box;
3719
4056
  }
3720
4057
 
3721
4058
  /* EVM 多地址卡片: 全宽 */
4059
+
3722
4060
  .taskon-network-card--multi {
3723
4061
  grid-column: 1 / -1;
3724
4062
  }
3725
4063
 
3726
4064
  /* 单链卡片 */
4065
+
3727
4066
  .taskon-network-card--single {
3728
4067
  min-height: 140px;
3729
4068
  }
3730
4069
 
3731
4070
  /* 卡片头部 */
4071
+
3732
4072
  .taskon-network-card__header {
3733
4073
  display: flex;
3734
4074
  align-items: center;
3735
4075
  }
3736
4076
 
3737
4077
  /* 链标签: 14px medium 白色 */
4078
+
3738
4079
  .taskon-network-card__label {
3739
4080
  font-size: 14px;
3740
4081
  font-weight: 500;
3741
4082
  line-height: 20px;
3742
- color: var(--taskon-uc-color-text-lightest, #ffffff);
4083
+ color: var(--taskon-color-text);
3743
4084
  }
3744
4085
 
3745
4086
  /* 链图标容器 */
4087
+
3746
4088
  .taskon-network-card__chain-icon {
3747
4089
  display: flex;
3748
- gap: var(--taskon-uc-spacing-xs, 8px);
4090
+ gap: var(--taskon-spacing-sm);
3749
4091
  }
3750
4092
 
3751
4093
  .taskon-network-card__chain-icon svg {
@@ -3755,10 +4097,11 @@
3755
4097
  }
3756
4098
 
3757
4099
  /* EVM 多链图标行 */
4100
+
3758
4101
  .taskon-network-chain-icons {
3759
4102
  display: flex;
3760
4103
  flex-wrap: wrap;
3761
- gap: var(--taskon-uc-spacing-xs, 8px);
4104
+ gap: var(--taskon-spacing-sm);
3762
4105
  align-items: center;
3763
4106
  }
3764
4107
 
@@ -3775,33 +4118,35 @@
3775
4118
  justify-content: center;
3776
4119
  width: 24px;
3777
4120
  height: 24px;
3778
- background-color: #f2f4f5;
4121
+ background-color: var(--taskon-color-bg-floating);
3779
4122
  border-radius: 8px;
3780
4123
  }
3781
4124
 
3782
4125
  /* 地址列表容器 */
4126
+
3783
4127
  .taskon-network-card__addresses {
3784
4128
  display: flex;
3785
4129
  flex-direction: column;
3786
- gap: var(--taskon-uc-spacing-s, 12px);
4130
+ gap: var(--taskon-spacing-sm);
3787
4131
  }
3788
4132
 
3789
4133
  /* 地址行 */
4134
+
3790
4135
  .taskon-network-address-row {
3791
4136
  display: flex;
3792
4137
  align-items: center;
3793
- gap: var(--taskon-uc-spacing-l, 20px);
4138
+ gap: var(--taskon-spacing-md);
3794
4139
  height: 40px;
3795
- padding: 0 var(--taskon-uc-spacing-m, 16px);
3796
- background-color: var(--taskon-uc-color-text-invisible, rgba(255, 255, 255, 0.04));
3797
- border-radius: var(--taskon-uc-radius-m, 6px);
4140
+ padding: 0 var(--taskon-spacing-md);
4141
+ background-color: var(--taskon-color-bg-surface-subtle);
4142
+ border-radius: var(--taskon-border-radius);
3798
4143
  backdrop-filter: blur(10px);
3799
4144
  }
3800
4145
 
3801
4146
  .taskon-network-address-row__left {
3802
4147
  display: flex;
3803
4148
  align-items: center;
3804
- gap: var(--taskon-uc-spacing-xs, 8px);
4149
+ gap: var(--taskon-spacing-sm);
3805
4150
  flex: 1;
3806
4151
  }
3807
4152
 
@@ -3809,24 +4154,24 @@
3809
4154
  font-size: 14px;
3810
4155
  font-weight: 500;
3811
4156
  line-height: 20px;
3812
- color: var(--taskon-uc-color-text-lightest, #ffffff);
4157
+ color: var(--taskon-color-text);
3813
4158
  }
3814
4159
 
3815
4160
  .taskon-network-address-row__addr--secondary {
3816
- color: var(--taskon-uc-color-text-light, rgba(255, 255, 255, 0.6));
4161
+ color: var(--taskon-color-text-tertiary);
3817
4162
  }
3818
4163
 
3819
4164
  .taskon-network-address-row__divider {
3820
4165
  width: 1px;
3821
4166
  height: 15px;
3822
- background-color: var(--taskon-uc-color-text-light, rgba(255, 255, 255, 0.6));
4167
+ background-color: var(--taskon-color-text-tertiary);
3823
4168
  opacity: 0.1;
3824
4169
  }
3825
4170
 
3826
4171
  .taskon-network-address-row__right {
3827
4172
  display: flex;
3828
4173
  align-items: center;
3829
- gap: var(--taskon-uc-spacing-xs, 8px);
4174
+ gap: var(--taskon-spacing-sm);
3830
4175
  min-width: 142px;
3831
4176
  justify-content: flex-end;
3832
4177
  }
@@ -3839,21 +4184,22 @@
3839
4184
  }
3840
4185
 
3841
4186
  .taskon-network-address-row__type--primary {
3842
- color: #1affab;
4187
+ color: var(--taskon-color-secondary);
3843
4188
  }
3844
4189
 
3845
4190
  .taskon-network-address-row__type--secondary {
3846
- color: rgba(203, 255, 1, 0.4);
4191
+ color: var(--taskon-color-primary);
3847
4192
  }
3848
4193
 
3849
4194
  .taskon-network-address-row__edit {
3850
4195
  width: 14px;
3851
4196
  height: 14px;
3852
- color: var(--taskon-uc-color-text-light, rgba(255, 255, 255, 0.6));
4197
+ color: var(--taskon-color-text-tertiary);
3853
4198
  cursor: pointer;
3854
4199
  }
3855
4200
 
3856
4201
  /* 复制按钮 */
4202
+
3857
4203
  .taskon-network-copy-btn {
3858
4204
  display: flex;
3859
4205
  align-items: center;
@@ -3862,26 +4208,27 @@
3862
4208
  background: none;
3863
4209
  border: none;
3864
4210
  cursor: pointer;
3865
- color: var(--taskon-uc-color-text-lightest, #ffffff);
4211
+ color: var(--taskon-color-text);
3866
4212
  transition: color 0.2s ease;
3867
4213
  }
3868
4214
 
3869
4215
  .taskon-network-copy-btn:hover {
3870
- color: var(--taskon-uc-color-link, #ffd465);
4216
+ color: var(--taskon-color-link);
3871
4217
  }
3872
4218
 
3873
4219
  /* Unbind 徽章按钮 */
4220
+
3874
4221
  .taskon-network-unbind-badge {
3875
4222
  display: flex;
3876
4223
  align-items: center;
3877
4224
  justify-content: center;
3878
4225
  height: 20px;
3879
- padding: 0 var(--taskon-uc-spacing-xs, 8px);
4226
+ padding: 0 var(--taskon-spacing-sm);
3880
4227
  font-size: 11px;
3881
4228
  font-weight: 600;
3882
4229
  line-height: 12px;
3883
- color: var(--taskon-uc-color-text-lightest, #ffffff);
3884
- background-color: var(--taskon-uc-color-text-darkest, rgba(255, 255, 255, 0.1));
4230
+ color: var(--taskon-color-text);
4231
+ background-color: var(--taskon-color-border);
3885
4232
  border: none;
3886
4233
  border-radius: 4px;
3887
4234
  cursor: pointer;
@@ -3890,7 +4237,7 @@
3890
4237
  }
3891
4238
 
3892
4239
  .taskon-network-unbind-badge:hover:not(:disabled) {
3893
- background-color: rgba(255, 255, 255, 0.2);
4240
+ background-color: var(--taskon-color-bg-surface-strong);
3894
4241
  }
3895
4242
 
3896
4243
  .taskon-network-unbind-badge:disabled {
@@ -3899,6 +4246,7 @@
3899
4246
  }
3900
4247
 
3901
4248
  /* 右上角的 Unbind 按钮（单链卡片） */
4249
+
3902
4250
  .taskon-network-unbind-badge--corner {
3903
4251
  position: absolute;
3904
4252
  top: 8px;
@@ -3906,14 +4254,15 @@
3906
4254
  }
3907
4255
 
3908
4256
  /* 地址输入框样式（单链卡片） */
4257
+
3909
4258
  .taskon-network-address-input {
3910
4259
  display: flex;
3911
4260
  align-items: center;
3912
4261
  justify-content: space-between;
3913
4262
  height: 34px;
3914
- padding: 0 var(--taskon-uc-spacing-m, 16px);
3915
- background-color: var(--taskon-uc-color-text-invisible, rgba(255, 255, 255, 0.04));
3916
- border-radius: var(--taskon-uc-radius-m, 6px);
4263
+ padding: 0 var(--taskon-spacing-md);
4264
+ background-color: var(--taskon-color-bg-surface-subtle);
4265
+ border-radius: var(--taskon-border-radius);
3917
4266
  backdrop-filter: blur(10px);
3918
4267
  }
3919
4268
 
@@ -3921,29 +4270,30 @@
3921
4270
  font-size: 14px;
3922
4271
  font-weight: 500;
3923
4272
  line-height: 20px;
3924
- color: var(--taskon-uc-color-text-lightest, #ffffff);
4273
+ color: var(--taskon-color-text);
3925
4274
  }
3926
4275
 
3927
4276
  /* Connect Wallet 按钮 */
4277
+
3928
4278
  .taskon-network-connect-btn {
3929
4279
  display: flex;
3930
4280
  align-items: center;
3931
4281
  justify-content: center;
3932
4282
  height: 34px;
3933
- padding: var(--taskon-uc-spacing-xs, 8px) var(--taskon-uc-spacing-s, 12px);
4283
+ padding: var(--taskon-spacing-sm) var(--taskon-spacing-sm);
3934
4284
  font-size: 14px;
3935
4285
  font-weight: 500;
3936
4286
  line-height: 20px;
3937
- color: #000000;
3938
- background-color: var(--taskon-uc-color-text-lightest, #ffffff);
4287
+ color: var(--taskon-color-text-on-primary);
4288
+ background-color: var(--taskon-color-text);
3939
4289
  border: none;
3940
- border-radius: var(--taskon-uc-radius-m, 6px);
4290
+ border-radius: var(--taskon-border-radius);
3941
4291
  cursor: pointer;
3942
4292
  transition: all 0.2s ease;
3943
4293
  }
3944
4294
 
3945
4295
  .taskon-network-connect-btn:hover:not(:disabled) {
3946
- background-color: rgba(255, 255, 255, 0.9);
4296
+ background-color: var(--taskon-color-bg-floating);
3947
4297
  }
3948
4298
 
3949
4299
  .taskon-network-connect-btn:disabled {
@@ -3967,14 +4317,14 @@
3967
4317
  }
3968
4318
 
3969
4319
  .taskon-network-card {
3970
- padding: var(--taskon-uc-spacing-m, 16px);
4320
+ padding: var(--taskon-spacing-md);
3971
4321
  }
3972
4322
 
3973
4323
  .taskon-network-address-row {
3974
4324
  flex-wrap: wrap;
3975
4325
  height: auto;
3976
- padding: var(--taskon-uc-spacing-xs, 8px) var(--taskon-uc-spacing-s, 12px);
3977
- gap: var(--taskon-uc-spacing-xs, 8px);
4326
+ padding: var(--taskon-spacing-sm) var(--taskon-spacing-sm);
4327
+ gap: var(--taskon-spacing-sm);
3978
4328
  }
3979
4329
 
3980
4330
  .taskon-network-address-row__left {
@@ -4000,43 +4350,46 @@
4000
4350
  ============================================================================ */
4001
4351
 
4002
4352
  /* Identity Section */
4353
+
4003
4354
  .taskon-identity-section {
4004
4355
  display: flex;
4005
4356
  flex-direction: column;
4006
- gap: var(--taskon-uc-spacing-m, 16px);
4357
+ gap: var(--taskon-spacing-md);
4007
4358
  }
4008
4359
 
4009
4360
  .taskon-identity-section__title {
4010
4361
  font-size: 16px;
4011
4362
  font-weight: 600;
4012
- color: var(--taskon-uc-color-text-lightest, #ffffff);
4363
+ color: var(--taskon-color-text);
4013
4364
  margin: 0;
4014
4365
  }
4015
4366
 
4016
4367
  /* Identity List */
4368
+
4017
4369
  .taskon-identity-list {
4018
4370
  display: flex;
4019
4371
  flex-direction: column;
4020
- gap: var(--taskon-uc-spacing-sm, 8px);
4372
+ gap: var(--taskon-spacing-sm);
4021
4373
  }
4022
4374
 
4023
4375
  /* Identity Item (用于钱包) */
4376
+
4024
4377
  .taskon-identity-item {
4025
4378
  display: flex;
4026
4379
  align-items: center;
4027
- gap: var(--taskon-uc-spacing-m, 16px);
4028
- padding: var(--taskon-uc-spacing-m, 16px);
4029
- background-color: var(--taskon-uc-color-text-invisible, rgba(255, 255, 255, 0.04));
4030
- border-radius: var(--taskon-uc-radius-l, 8px);
4380
+ gap: var(--taskon-spacing-md);
4381
+ padding: var(--taskon-spacing-md);
4382
+ background-color: var(--taskon-color-bg-surface-subtle);
4383
+ border-radius: var(--taskon-border-radius);
4031
4384
  transition: all 0.2s ease;
4032
4385
  }
4033
4386
 
4034
4387
  .taskon-identity-item:hover {
4035
- background-color: rgba(255, 255, 255, 0.08);
4388
+ background-color: var(--taskon-color-bg-surface-strong);
4036
4389
  }
4037
4390
 
4038
4391
  .taskon-identity-item--bound {
4039
- background-color: var(--taskon-uc-color-text-invisible, rgba(255, 255, 255, 0.04));
4392
+ background-color: var(--taskon-color-bg-surface-subtle);
4040
4393
  }
4041
4394
 
4042
4395
  .taskon-identity-item__icon {
@@ -4046,13 +4399,13 @@
4046
4399
  width: 40px;
4047
4400
  height: 40px;
4048
4401
  font-size: 20px;
4049
- background-color: rgba(255, 255, 255, 0.1);
4050
- border-radius: var(--taskon-uc-radius-m, 6px);
4402
+ background-color: var(--taskon-color-bg-surface-strong);
4403
+ border-radius: var(--taskon-border-radius);
4051
4404
  flex-shrink: 0;
4052
4405
  }
4053
4406
 
4054
4407
  .taskon-identity-item--bound .taskon-identity-item__icon {
4055
- background-color: rgba(255, 255, 255, 0.1);
4408
+ background-color: var(--taskon-color-bg-surface-strong);
4056
4409
  }
4057
4410
 
4058
4411
  .taskon-identity-item__info {
@@ -4066,19 +4419,19 @@
4066
4419
  .taskon-identity-item__name {
4067
4420
  font-size: 14px;
4068
4421
  font-weight: 500;
4069
- color: var(--taskon-uc-color-text-lightest, #ffffff);
4422
+ color: var(--taskon-color-text);
4070
4423
  }
4071
4424
 
4072
4425
  .taskon-identity-item__value {
4073
4426
  display: flex;
4074
4427
  align-items: center;
4075
- gap: var(--taskon-uc-spacing-xs, 4px);
4428
+ gap: var(--taskon-spacing-xs);
4076
4429
  font-size: 13px;
4077
- color: var(--taskon-uc-color-text-light, rgba(255, 255, 255, 0.6));
4430
+ color: var(--taskon-color-text-tertiary);
4078
4431
  }
4079
4432
 
4080
4433
  .taskon-identity-item__link {
4081
- color: var(--taskon-uc-color-link, #ffd465);
4434
+ color: var(--taskon-color-link);
4082
4435
  text-decoration: none;
4083
4436
  transition: color 0.2s ease;
4084
4437
  }
@@ -4097,9 +4450,9 @@
4097
4450
  padding: 2px 6px;
4098
4451
  font-size: 11px;
4099
4452
  font-weight: 500;
4100
- color: var(--taskon-uc-color-link, #ffd465);
4101
- background-color: rgba(255, 212, 101, 0.15);
4102
- border-radius: var(--taskon-uc-radius-s, 4px);
4453
+ color: var(--taskon-color-link);
4454
+ background-color: var(--taskon-color-secondary-bg);
4455
+ border-radius: var(--taskon-border-radius-sm);
4103
4456
  }
4104
4457
 
4105
4458
  .taskon-identity-item__action {
@@ -4107,14 +4460,15 @@
4107
4460
  }
4108
4461
 
4109
4462
  /* Identity Button */
4463
+
4110
4464
  .taskon-identity-btn {
4111
4465
  display: inline-flex;
4112
4466
  align-items: center;
4113
4467
  justify-content: center;
4114
- padding: var(--taskon-uc-spacing-xs, 8px) var(--taskon-uc-spacing-m, 16px);
4468
+ padding: var(--taskon-spacing-sm) var(--taskon-spacing-md);
4115
4469
  font-size: 13px;
4116
4470
  font-weight: 500;
4117
- border-radius: var(--taskon-uc-radius-m, 6px);
4471
+ border-radius: var(--taskon-border-radius);
4118
4472
  border: none;
4119
4473
  cursor: pointer;
4120
4474
  transition: all 0.2s ease;
@@ -4128,24 +4482,24 @@
4128
4482
  }
4129
4483
 
4130
4484
  .taskon-identity-btn--bind {
4131
- background-color: var(--taskon-uc-color-text-lightest, #ffffff);
4132
- color: #000000;
4485
+ background-color: var(--taskon-color-text);
4486
+ color: var(--taskon-color-text-on-primary);
4133
4487
  }
4134
4488
 
4135
4489
  .taskon-identity-btn--bind:hover:not(:disabled) {
4136
- background-color: rgba(255, 255, 255, 0.9);
4490
+ background-color: var(--taskon-color-bg-floating);
4137
4491
  }
4138
4492
 
4139
4493
  .taskon-identity-btn--unbind {
4140
4494
  background: transparent;
4141
- color: var(--taskon-uc-color-text-light, rgba(255, 255, 255, 0.6));
4142
- border: 1px solid var(--taskon-uc-color-border-btn, rgba(255, 255, 255, 0.1));
4495
+ color: var(--taskon-color-text-tertiary);
4496
+ border: 1px solid var(--taskon-color-border);
4143
4497
  }
4144
4498
 
4145
4499
  .taskon-identity-btn--unbind:hover:not(:disabled) {
4146
- color: #ef4444;
4147
- border-color: #ef4444;
4148
- background-color: rgba(239, 68, 68, 0.1);
4500
+ color: var(--taskon-color-error);
4501
+ border-color: var(--taskon-color-error);
4502
+ background-color: var(--taskon-color-error-bg);
4149
4503
  }
4150
4504
 
4151
4505
  /* ============================================================================
@@ -4156,8 +4510,8 @@
4156
4510
  display: flex;
4157
4511
  flex-direction: column;
4158
4512
  align-items: center;
4159
- gap: var(--taskon-uc-spacing-xl, 24px);
4160
- padding: var(--taskon-uc-spacing-xl, 24px) var(--taskon-uc-spacing-l, 20px);
4513
+ gap: var(--taskon-spacing-lg);
4514
+ padding: var(--taskon-spacing-lg) var(--taskon-spacing-md);
4161
4515
  }
4162
4516
 
4163
4517
  .taskon-confirm-unlink__icon {
@@ -4167,8 +4521,8 @@
4167
4521
  width: 48px;
4168
4522
  height: 48px;
4169
4523
  border-radius: 50%;
4170
- background-color: rgba(239, 68, 68, 0.15);
4171
- color: #ef4444;
4524
+ background-color: var(--taskon-color-error-bg);
4525
+ color: var(--taskon-color-error);
4172
4526
  flex-shrink: 0;
4173
4527
  }
4174
4528
 
@@ -4176,7 +4530,7 @@
4176
4530
  display: flex;
4177
4531
  flex-direction: column;
4178
4532
  align-items: center;
4179
- gap: var(--taskon-uc-spacing-xs, 8px);
4533
+ gap: var(--taskon-spacing-sm);
4180
4534
  text-align: center;
4181
4535
  }
4182
4536
 
@@ -4184,7 +4538,7 @@
4184
4538
  font-size: 18px;
4185
4539
  font-weight: 600;
4186
4540
  line-height: 24px;
4187
- color: var(--taskon-uc-color-text-lightest, #ffffff);
4541
+ color: var(--taskon-color-text);
4188
4542
  margin: 0;
4189
4543
  }
4190
4544
 
@@ -4192,13 +4546,13 @@
4192
4546
  font-size: 14px;
4193
4547
  font-weight: 400;
4194
4548
  line-height: 20px;
4195
- color: var(--taskon-uc-color-text-light, rgba(255, 255, 255, 0.6));
4549
+ color: var(--taskon-color-text-tertiary);
4196
4550
  margin: 0;
4197
4551
  }
4198
4552
 
4199
4553
  .taskon-confirm-unlink__actions {
4200
4554
  display: flex;
4201
- gap: var(--taskon-uc-spacing-s, 12px);
4555
+ gap: var(--taskon-spacing-sm);
4202
4556
  width: 100%;
4203
4557
  }
4204
4558
 
@@ -4208,10 +4562,10 @@
4208
4562
  align-items: center;
4209
4563
  justify-content: center;
4210
4564
  height: 40px;
4211
- padding: 0 var(--taskon-uc-spacing-l, 20px);
4565
+ padding: 0 var(--taskon-spacing-md);
4212
4566
  font-size: 14px;
4213
4567
  font-weight: 500;
4214
- border-radius: var(--taskon-uc-radius-m, 6px);
4568
+ border-radius: var(--taskon-border-radius);
4215
4569
  border: none;
4216
4570
  cursor: pointer;
4217
4571
  transition: all 0.2s ease;
@@ -4223,22 +4577,22 @@
4223
4577
  }
4224
4578
 
4225
4579
  .taskon-confirm-unlink__btn--cancel {
4226
- color: var(--taskon-uc-color-text-lightest, #ffffff);
4227
- background-color: var(--taskon-uc-color-text-darkest, rgba(255, 255, 255, 0.1));
4228
- border: 1px solid var(--taskon-uc-color-border-btn, rgba(255, 255, 255, 0.1));
4580
+ color: var(--taskon-color-text);
4581
+ background-color: var(--taskon-color-border);
4582
+ border: 1px solid var(--taskon-color-border);
4229
4583
  }
4230
4584
 
4231
4585
  .taskon-confirm-unlink__btn--cancel:hover:not(:disabled) {
4232
- background-color: rgba(255, 255, 255, 0.15);
4586
+ background-color: var(--taskon-color-bg-surface-strong);
4233
4587
  }
4234
4588
 
4235
4589
  .taskon-confirm-unlink__btn--confirm {
4236
- color: #ffffff;
4237
- background-color: #ef4444;
4590
+ color: var(--taskon-color-text-on-primary);
4591
+ background-color: var(--taskon-color-error);
4238
4592
  }
4239
4593
 
4240
4594
  .taskon-confirm-unlink__btn--confirm:hover:not(:disabled) {
4241
- background-color: #dc2626;
4595
+ background-color: var(--taskon-color-error);
4242
4596
  }
4243
4597
 
4244
4598
  /* ============================================================================
@@ -4248,14 +4602,14 @@
4248
4602
  @media (max-width: 1000px) {
4249
4603
  /* 中等屏幕：每行 2 个 */
4250
4604
  .taskon-identity-social-item {
4251
- width: calc(50% - 10px);
4605
+ width: 48%;
4252
4606
  min-width: 280px;
4253
4607
  }
4254
4608
  }
4255
4609
 
4256
- @media (max-width: 750px) {
4257
- /* 小屏幕：每行 1 个，全宽 */
4258
- .taskon-identity-social-section__title {
4610
+ @media (max-width: 750px) {
4611
+ /* 小屏幕：每行 1 个，全宽 */
4612
+ .taskon-identity-social-section__title {
4259
4613
  font-size: 20px;
4260
4614
  line-height: 28px;
4261
4615
  }
@@ -4270,8 +4624,8 @@
4270
4624
  }
4271
4625
 
4272
4626
  .taskon-identity-item {
4273
- padding: var(--taskon-uc-spacing-sm, 8px) var(--taskon-uc-spacing-m, 16px);
4274
- gap: var(--taskon-uc-spacing-sm, 8px);
4627
+ padding: var(--taskon-spacing-sm) var(--taskon-spacing-md);
4628
+ gap: var(--taskon-spacing-sm);
4275
4629
  }
4276
4630
 
4277
4631
  .taskon-identity-item__icon {
@@ -4288,10 +4642,193 @@
4288
4642
  font-size: 12px;
4289
4643
  }
4290
4644
 
4291
- .taskon-identity-btn {
4292
- padding: var(--taskon-uc-spacing-xs, 4px) var(--taskon-uc-spacing-sm, 8px);
4293
- font-size: 12px;
4294
- min-width: 60px;
4295
- height: 28px;
4296
- }
4645
+ .taskon-identity-btn {
4646
+ padding: var(--taskon-spacing-xs) var(--taskon-spacing-sm);
4647
+ font-size: 12px;
4648
+ min-width: 60px;
4649
+ height: 28px;
4650
+ }
4297
4651
  }
4652
+
4653
+ @media (max-width: 750px) {
4654
+ .taskon-user-center {
4655
+ gap: var(--taskon-spacing-md);
4656
+ padding: var(--taskon-spacing-md);
4657
+ border-radius: var(--taskon-border-radius-sm);
4658
+ }
4659
+
4660
+ .taskon-user-center-content {
4661
+ min-height: 0;
4662
+ }
4663
+
4664
+ .taskon-user-center .taskon-table__header,
4665
+ .taskon-user-center .taskon-table__cell {
4666
+ padding: var(--taskon-spacing-xs) var(--taskon-spacing-sm);
4667
+ font-size: 13px;
4668
+ line-height: 18px;
4669
+ }
4670
+
4671
+ .taskon-user-center .taskon-table__row {
4672
+ height: 60px;
4673
+ }
4674
+
4675
+ .taskon-user-center-pagination {
4676
+ margin-top: var(--taskon-spacing-lg);
4677
+ }
4678
+
4679
+ .taskon-my-rewards {
4680
+ gap: var(--taskon-spacing-lg);
4681
+ }
4682
+
4683
+ .taskon-my-rewards__section {
4684
+ gap: var(--taskon-spacing-sm);
4685
+ }
4686
+
4687
+ .taskon-my-rewards__section-title,
4688
+ .taskon-asset-carousel__title,
4689
+ .taskon-frozen-assets__title,
4690
+ .taskon-xp-level-card__history-title {
4691
+ font-size: 14px;
4692
+ line-height: 20px;
4693
+ }
4694
+
4695
+ .taskon-asset-carousel {
4696
+ gap: var(--taskon-spacing-sm);
4697
+ margin-bottom: var(--taskon-spacing-lg);
4698
+ }
4699
+
4700
+ .taskon-asset-carousel__container {
4701
+ gap: var(--taskon-spacing-xs);
4702
+ }
4703
+
4704
+ .taskon-asset-card {
4705
+ min-width: calc(50% - 4px);
4706
+ gap: var(--taskon-spacing-sm);
4707
+ padding: var(--taskon-spacing-sm);
4708
+ }
4709
+
4710
+ .taskon-asset-card__icon,
4711
+ .taskon-asset-card__icon-img {
4712
+ width: 40px;
4713
+ height: 40px;
4714
+ }
4715
+
4716
+ .taskon-asset-card__value {
4717
+ font-size: 16px;
4718
+ line-height: 22px;
4719
+ }
4720
+
4721
+ .taskon-withdraw-pending {
4722
+ align-items: flex-start;
4723
+ gap: var(--taskon-spacing-sm);
4724
+ padding: var(--taskon-spacing-sm) var(--taskon-spacing-md);
4725
+ }
4726
+
4727
+ .taskon-withdraw-pending__text {
4728
+ font-size: 14px;
4729
+ white-space: normal;
4730
+ }
4731
+
4732
+ .taskon-withdraw-pending__count {
4733
+ font-size: 12px;
4734
+ }
4735
+
4736
+ .taskon-token-assets__symbol-cell,
4737
+ .taskon-token-assets__network-cell {
4738
+ gap: var(--taskon-spacing-xs);
4739
+ }
4740
+
4741
+ .taskon-token-assets__symbol,
4742
+ .taskon-token-assets__chain,
4743
+ .taskon-token-assets__balance,
4744
+ .taskon-token-assets__frozen-btn {
4745
+ font-size: 12px;
4746
+ }
4747
+
4748
+ .taskon-token-assets__withdraw-btn {
4749
+ height: 30px !important;
4750
+ padding: var(--taskon-spacing-xs) var(--taskon-spacing-sm) !important;
4751
+ font-size: 12px !important;
4752
+ }
4753
+
4754
+ .taskon-activity-history__campaign-name {
4755
+ font-size: 13px;
4756
+ line-height: 18px;
4757
+ }
4758
+
4759
+ .taskon-activity-history__campaign-type {
4760
+ font-size: 11px;
4761
+ line-height: 14px;
4762
+ }
4763
+
4764
+ .taskon-activity-history__cell--time {
4765
+ font-size: 12px;
4766
+ line-height: 16px;
4767
+ }
4768
+
4769
+ .taskon-reward-detail__row {
4770
+ align-items: flex-start;
4771
+ flex-wrap: wrap;
4772
+ gap: var(--taskon-spacing-sm);
4773
+ padding: var(--taskon-spacing-sm);
4774
+ }
4775
+
4776
+ .taskon-reward-detail__row--nft {
4777
+ padding: var(--taskon-spacing-sm);
4778
+ }
4779
+
4780
+ .taskon-reward-detail__cell--time {
4781
+ width: 100%;
4782
+ font-size: 12px;
4783
+ line-height: 16px;
4784
+ white-space: normal;
4785
+ }
4786
+
4787
+ .taskon-reward-detail__cell--action {
4788
+ width: 100%;
4789
+ margin-left: 0;
4790
+ }
4791
+
4792
+ .taskon-reward-detail__claim-btn {
4793
+ width: 100%;
4794
+ }
4795
+
4796
+ .taskon-reward-detail__primary {
4797
+ font-size: 13px;
4798
+ line-height: 18px;
4799
+ }
4800
+
4801
+ .taskon-frozen-assets__item {
4802
+ align-items: flex-start;
4803
+ flex-direction: column;
4804
+ gap: var(--taskon-spacing-sm);
4805
+ }
4806
+
4807
+ .taskon-frozen-assets__resend-btn {
4808
+ width: 100%;
4809
+ }
4810
+
4811
+ .taskon-xp-level-card__header {
4812
+ align-items: flex-start;
4813
+ flex-direction: column;
4814
+ gap: var(--taskon-spacing-sm);
4815
+ }
4816
+
4817
+ .taskon-xp-level-card__xp {
4818
+ align-items: flex-start;
4819
+ }
4820
+
4821
+ .taskon-xp-level-card__level-badge {
4822
+ width: 40px;
4823
+ height: 40px;
4824
+ font-size: 16px;
4825
+ }
4826
+
4827
+ .taskon-xp-level-card__level-value {
4828
+ font-size: 18px;
4829
+ }
4830
+
4831
+ .taskon-confirm-unlink__actions {
4832
+ flex-direction: column;
4833
+ }
4834
+ }