@taskon/widget-react 0.0.1-beta.1

package/dist/LeaderboardWidget.css

@@ -0,0 +1,815 @@
+/**
+ * LeaderboardWidget 样式
+ *
+ * 采用 BEM 命名规范
+ * 前缀: taskon-leaderboard
+ */
+
+/* ============================================================================
+   CSS 变量定义
+   ============================================================================ */
+
+.taskon-leaderboard {
+  /* 颜色系统 - 与 Quest Widget 保持一致 */
+  --taskon-leaderboard-bg-body: #111111;
+  --taskon-leaderboard-text-lightest: #ffffff;
+  --taskon-leaderboard-text-lighter: rgba(255, 255, 255, 0.8);
+  --taskon-leaderboard-text-light: rgba(255, 255, 255, 0.6);
+  --taskon-leaderboard-text-dark: rgba(255, 255, 255, 0.4);
+  --taskon-leaderboard-text-darkest: rgba(255, 255, 255, 0.1);
+  --taskon-leaderboard-text-invisible: rgba(255, 255, 255, 0.04);
+  --taskon-leaderboard-primary: #cbff01;
+  --taskon-leaderboard-secondary: #1affab;
+  --taskon-leaderboard-link: #58afff;
+  --taskon-leaderboard-error: #ef4444;
+
+  /* 排名徽章颜色 */
+  --taskon-leaderboard-rank-gold: #ffbf29;
+  --taskon-leaderboard-rank-gold-stroke: #ffd465;
+  --taskon-leaderboard-rank-silver: #c0c0c0;
+  --taskon-leaderboard-rank-silver-stroke: #d8d8d8;
+  --taskon-leaderboard-rank-bronze: #cd7f32;
+  --taskon-leaderboard-rank-bronze-stroke: #e0a060;
+
+  /* 间距系统 */
+  --taskon-leaderboard-spacing-xxs: 4px;
+  --taskon-leaderboard-spacing-xs: 8px;
+  --taskon-leaderboard-spacing-s: 12px;
+  --taskon-leaderboard-spacing-m: 16px;
+  --taskon-leaderboard-spacing-l: 20px;
+  --taskon-leaderboard-spacing-xl: 24px;
+  --taskon-leaderboard-spacing-xxl: 32px;
+
+  /* 圆角系统 */
+  --taskon-leaderboard-radius-s: 4px;
+  --taskon-leaderboard-radius-m: 6px;
+  --taskon-leaderboard-radius-l: 8px;
+  --taskon-leaderboard-radius-xl: 12px;
+}
+
+/* ============================================================================
+   容器
+   ============================================================================ */
+
+.taskon-leaderboard {
+  font-size: 16px;
+  line-height: 1.5;
+  color: var(--taskon-leaderboard-text-lightest);
+  background-color: var(--taskon-leaderboard-bg-body);
+  overflow: hidden;
+}
+
+.taskon-leaderboard--error {
+  padding: 40px 20px;
+  text-align: center;
+}
+
+.taskon-leaderboard__error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--taskon-leaderboard-spacing-s);
+}
+
+.taskon-leaderboard__error-text {
+  color: var(--taskon-leaderboard-error);
+  font-size: 14px;
+  margin: 0;
+}
+
+.taskon-leaderboard__retry-btn {
+  padding: var(--taskon-leaderboard-spacing-xs) var(--taskon-leaderboard-spacing-m);
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--taskon-leaderboard-primary);
+  background-color: transparent;
+  border: 1px solid var(--taskon-leaderboard-primary);
+  border-radius: var(--taskon-leaderboard-radius-m);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.taskon-leaderboard__retry-btn:hover {
+  background-color: var(--taskon-leaderboard-primary);
+  color: var(--taskon-leaderboard-bg-body);
+}
+
+/* ============================================================================
+   Tabs - 参考 Figma 设计：左对齐布局，12px 间距，8px 圆角
+   ============================================================================ */
+
+.taskon-leaderboard-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--taskon-leaderboard-spacing-s);
+  padding: var(--taskon-leaderboard-spacing-m) var(--taskon-leaderboard-spacing-l) var(--taskon-leaderboard-spacing-xs);
+  background-color: transparent;
+}
+
+/* Tab 按钮 - 默认状态：透明背景 (text-invisible) */
+.taskon-leaderboard-tabs__tab {
+  padding: var(--taskon-leaderboard-spacing-xs) var(--taskon-leaderboard-spacing-m);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  color: var(--taskon-leaderboard-text-lightest);
+  background-color: var(--taskon-leaderboard-text-invisible);
+  border: 1px solid transparent;
+  border-radius: var(--taskon-leaderboard-radius-l);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+/* Tab 悬停状态：较亮背景 (text-darkest) */
+.taskon-leaderboard-tabs__tab:hover {
+  background-color: var(--taskon-leaderboard-text-darkest);
+}
+
+/* Tab 激活状态：白色背景，黑色文字，边框 */
+.taskon-leaderboard-tabs__tab--active {
+  background-color: var(--taskon-leaderboard-text-lightest);
+  color: #0d0d0d;
+  border-color: rgba(13, 13, 13, 0.1);
+}
+
+.taskon-leaderboard-tabs__tab--active:hover {
+  background-color: var(--taskon-leaderboard-text-lightest);
+  color: #0d0d0d;
+}
+
+/* ============================================================================
+   Header - 参考 Figma 设计：垂直布局，状态/时间行 + 奖励行
+   ============================================================================ */
+
+.taskon-leaderboard-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--taskon-leaderboard-spacing-xxs);
+  padding: var(--taskon-leaderboard-spacing-xs) var(--taskon-leaderboard-spacing-l) var(--taskon-leaderboard-spacing-s);
+}
+
+/* 状态和时间容器 */
+.taskon-leaderboard-header__info {
+  display: flex;
+  align-items: center;
+  gap: var(--taskon-leaderboard-spacing-s);
+}
+
+/* 状态徽章 - 11px SemiBold，绿色文字，深色背景 */
+.taskon-leaderboard-header__status {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 20px;
+  padding: 0 var(--taskon-leaderboard-spacing-xs);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 12px;
+  border-radius: var(--taskon-leaderboard-radius-s);
+  background-color: var(--taskon-leaderboard-text-darkest);
+}
+
+.taskon-leaderboard-header__status--ongoing {
+  color: var(--taskon-leaderboard-secondary);
+}
+
+.taskon-leaderboard-header__status--ended {
+  color: var(--taskon-leaderboard-error);
+}
+
+.taskon-leaderboard-header__status--upcoming {
+  color: var(--taskon-leaderboard-primary);
+}
+
+/* 时间范围 - 16px Regular，80% 白色 */
+.taskon-leaderboard-header__time {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  color: var(--taskon-leaderboard-text-lighter);
+}
+
+/* 分隔线 - 竖线 */
+.taskon-leaderboard-header__separator {
+  width: 1px;
+  height: 16px;
+  background-color: var(--taskon-leaderboard-text-dark);
+}
+
+/* 参与人数容器 */
+.taskon-leaderboard-header__participants {
+  display: flex;
+  align-items: center;
+  gap: var(--taskon-leaderboard-spacing-xs);
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+}
+
+/* 参与人数标签 - 60% 白色 */
+.taskon-leaderboard-header__participants-label {
+  color: var(--taskon-leaderboard-text-light);
+}
+
+/* 参与人数值 - 80% 白色 */
+.taskon-leaderboard-header__participants-value {
+  color: var(--taskon-leaderboard-text-lighter);
+}
+
+/* ============================================================================
+   Header - 旧样式（保留兼容）
+   ============================================================================ */
+
+.taskon-leaderboard-header__title-row {
+  display: flex;
+  align-items: center;
+  gap: var(--taskon-leaderboard-spacing-s);
+  margin-bottom: var(--taskon-leaderboard-spacing-xs);
+}
+
+.taskon-leaderboard-header__title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--taskon-leaderboard-text-lightest);
+}
+
+/* 奖励信息容器 - 参考 Figma 设计：水平布局，16px 间距 */
+.taskon-leaderboard-header__reward-info {
+  display: flex;
+  align-items: center;
+  gap: var(--taskon-leaderboard-spacing-m);
+}
+
+/* 奖励项 - 水平布局，8px 间距 */
+.taskon-leaderboard-header__reward-item {
+  display: flex;
+  align-items: center;
+  gap: var(--taskon-leaderboard-spacing-xs);
+  font-size: 16px;
+  line-height: 24px;
+  white-space: nowrap;
+}
+
+/* 奖励标签 - 16px Regular 白色 */
+.taskon-leaderboard-header__reward-label {
+  font-weight: 400;
+  color: var(--taskon-leaderboard-text-lightest);
+}
+
+/* 奖励数值 - 16px SemiBold 主色 */
+.taskon-leaderboard-header__reward-value {
+  font-weight: 600;
+  color: var(--taskon-leaderboard-primary);
+}
+
+/* 奖励分隔线 - 12px 高度 */
+.taskon-leaderboard-header__reward-separator {
+  width: 1px;
+  height: 12px;
+  background-color: var(--taskon-leaderboard-text-darkest);
+}
+
+.taskon-leaderboard-header__reward-rules-btn {
+  margin-left: auto;
+  padding: var(--taskon-leaderboard-spacing-xxs) var(--taskon-leaderboard-spacing-s);
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--taskon-leaderboard-primary);
+  background-color: transparent;
+  border: 1px solid var(--taskon-leaderboard-primary);
+  border-radius: var(--taskon-leaderboard-radius-m);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.taskon-leaderboard-header__reward-rules-btn:hover {
+  background-color: var(--taskon-leaderboard-primary);
+  color: var(--taskon-leaderboard-bg-body);
+}
+
+/* ============================================================================
+   LeaderboardTable 容器 - 左右 padding 与 Header 一致
+   ============================================================================ */
+
+.taskon-leaderboard-table {
+  padding: 0 var(--taskon-leaderboard-spacing-l);
+}
+
+/* ============================================================================
+   LeaderboardTable 特有样式（基于公共 Table 组件）
+   ============================================================================ */
+
+/* 奖励显示 - 参考 Figma 设计：16px SemiBold 白色 */
+.taskon-leaderboard-table__reward {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--taskon-leaderboard-spacing-xs);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  color: var(--taskon-leaderboard-text-lightest);
+  white-space: nowrap;
+  flex-wrap: nowrap;
+}
+
+/* 奖励类型标签（如 "积分名:"） */
+.taskon-leaderboard-table__reward-type {
+  color: var(--taskon-leaderboard-text-lightest);
+}
+
+/* 奖励值（高亮显示） */
+.taskon-leaderboard-table__reward-value {
+  color: var(--taskon-leaderboard-secondary);
+}
+
+/* 奖励图标 */
+.taskon-leaderboard-table__reward-icon {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+}
+
+/* 潜在奖励（尚未获得） */
+.taskon-leaderboard-table__reward--potential {
+  opacity: 0.8;
+}
+
+/* 链信息 */
+.taskon-leaderboard-table__reward-chain {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--taskon-leaderboard-text-dark);
+}
+
+/* 未达标状态 - Not Qualified: rgba(255,255,255,0.6) */
+.taskon-leaderboard-table__reward--not-qualified {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  color: var(--taskon-leaderboard-text-light);
+}
+
+/* 禁用提示文本 */
+.taskon-leaderboard-table__disabled-tip {
+  width: 100%;
+  padding-top: var(--taskon-leaderboard-spacing-xs);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  color: var(--taskon-leaderboard-text-lightest);
+}
+
+.taskon-leaderboard-table__disabled-link {
+  color: var(--taskon-leaderboard-primary);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+/* 操作按钮 */
+.taskon-leaderboard-table__action-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 34px;
+  padding: var(--taskon-leaderboard-spacing-xs) var(--taskon-leaderboard-spacing-l);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  color: var(--taskon-leaderboard-text-lightest);
+  background-color: transparent;
+  border: 1px solid var(--taskon-leaderboard-text-darkest);
+  border-radius: var(--taskon-leaderboard-radius-m);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.taskon-leaderboard-table__action-btn:hover:not(:disabled) {
+  background-color: var(--taskon-leaderboard-text-invisible);
+  border-color: var(--taskon-leaderboard-text-dark);
+}
+
+.taskon-leaderboard-table__action-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ============================================================================
+   Rank Badge - 参考 Figma 设计：27px 六边形徽章
+   支持通过 CSS 变量自定义颜色
+   ============================================================================ */
+
+.taskon-leaderboard-rank {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 27px;
+  height: 27px;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: normal;
+  color: var(--taskon-leaderboard-text-lightest);
+}
+
+/* 六边形徽章样式 */
+.taskon-leaderboard-rank--badge {
+  position: relative;
+  width: 27px;
+  height: 27px;
+}
+
+.taskon-leaderboard-rank__hexagon {
+  display: block;
+}
+
+/* 六边形路径 - 通过 CSS 变量控制颜色 */
+.taskon-leaderboard-rank__hexagon-path {
+  stroke-width: 1;
+}
+
+/* 金色徽章 - 第1名 */
+.taskon-leaderboard-rank--gold .taskon-leaderboard-rank__hexagon-path {
+  fill: var(--taskon-leaderboard-rank-gold);
+  stroke: var(--taskon-leaderboard-rank-gold-stroke);
+}
+
+/* 银色徽章 - 第2名 */
+.taskon-leaderboard-rank--silver .taskon-leaderboard-rank__hexagon-path {
+  fill: var(--taskon-leaderboard-rank-silver);
+  stroke: var(--taskon-leaderboard-rank-silver-stroke);
+}
+
+/* 铜色徽章 - 第3名 */
+.taskon-leaderboard-rank--bronze .taskon-leaderboard-rank__hexagon-path {
+  fill: var(--taskon-leaderboard-rank-bronze);
+  stroke: var(--taskon-leaderboard-rank-bronze-stroke);
+}
+
+/* 徽章上的数字 */
+.taskon-leaderboard-rank__number-overlay {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--taskon-leaderboard-text-lightest);
+  text-align: center;
+}
+
+/* 未排名状态 */
+.taskon-leaderboard-rank--na,
+.taskon-leaderboard-rank--unranked {
+  color: var(--taskon-leaderboard-text-light);
+}
+
+/* 普通数字排名 */
+.taskon-leaderboard-rank--number {
+  font-size: 16px;
+  font-weight: 500;
+}
+
+/* ============================================================================
+   User Cell - 参考 Figma 设计：
+   - 当前用户：只显示 "YOU" 绿色
+   - 其他用户：显示地址，16px SemiBold 白色
+   ============================================================================ */
+
+.taskon-leaderboard-user {
+  display: flex;
+  align-items: center;
+}
+
+.taskon-leaderboard-user--clickable {
+  cursor: pointer;
+}
+
+.taskon-leaderboard-user--clickable:hover .taskon-leaderboard-user__name {
+  opacity: 0.8;
+}
+
+/* 用户名 - 16px SemiBold 白色 */
+.taskon-leaderboard-user__name {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  color: var(--taskon-leaderboard-text-lightest);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: opacity 0.2s ease;
+}
+
+/* YOU 标签 - 16px SemiBold 绿色 (#1affab) */
+.taskon-leaderboard-user__you-badge {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: normal;
+  color: var(--taskon-leaderboard-secondary);
+  text-transform: uppercase;
+}
+
+/* ============================================================================
+   Pagination - 参考 Figma 设计：居中布局，圆形按钮
+   ============================================================================ */
+
+.taskon-leaderboard-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--taskon-leaderboard-spacing-m);
+  padding: var(--taskon-leaderboard-spacing-l) var(--taskon-leaderboard-spacing-m);
+  border-top: none;
+}
+
+/* 分页按钮 - 圆形 30px */
+.taskon-leaderboard-pagination .taskon-pagination-btn {
+  width: 30px;
+  height: 30px;
+  min-width: 30px;
+  padding: 0;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  border: 1px solid var(--taskon-leaderboard-text-darkest);
+  color: var(--taskon-leaderboard-text-lightest);
+  transition: all 0.2s ease;
+}
+
+.taskon-leaderboard-pagination .taskon-pagination-btn:hover:not(:disabled) {
+  background-color: var(--taskon-leaderboard-text-invisible);
+  border-color: var(--taskon-leaderboard-text-dark);
+}
+
+.taskon-leaderboard-pagination .taskon-pagination-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* 分页图标 */
+.taskon-leaderboard-pagination .taskon-pagination-icon {
+  width: 16px;
+  height: 16px;
+}
+
+/* 页码信息 - 16px Regular，格式：1 / 5 */
+.taskon-leaderboard-pagination .taskon-pagination-info {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 400;
+}
+
+/* 当前页码 - 白色 */
+.taskon-leaderboard-pagination .taskon-pagination-info-current {
+  color: var(--taskon-leaderboard-text-lightest);
+}
+
+/* 分隔符和总页数 - 灰色 */
+.taskon-leaderboard-pagination .taskon-pagination-info-separator,
+.taskon-leaderboard-pagination .taskon-pagination-info-total {
+  color: var(--taskon-leaderboard-text-dark);
+}
+
+/* 隐藏范围文字 */
+.taskon-leaderboard-pagination .taskon-pagination-range {
+  display: none;
+}
+
+/* ============================================================================
+   Modal - 参考 Figma 设计稿更新
+   ============================================================================ */
+
+.taskon-leaderboard-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--taskon-leaderboard-spacing-l);
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.taskon-leaderboard-modal {
+  position: relative;
+  width: 100%;
+  max-width: 520px;
+  max-height: 80vh;
+  background-color: var(--taskon-leaderboard-bg-body);
+  border-radius: var(--taskon-leaderboard-radius-xl);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.taskon-leaderboard-modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--taskon-leaderboard-spacing-m) var(--taskon-leaderboard-spacing-l);
+  border-bottom: 1px solid var(--taskon-leaderboard-text-darkest);
+}
+
+/* 弹窗标题 - 24px SemiBold 白色 */
+.taskon-leaderboard-modal__title {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 32px;
+  color: var(--taskon-leaderboard-text-lightest);
+}
+
+.taskon-leaderboard-modal__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  background-color: transparent;
+  border: none;
+  border-radius: var(--taskon-leaderboard-radius-m);
+  cursor: pointer;
+  color: var(--taskon-leaderboard-text-dark);
+  transition: all 0.2s ease;
+}
+
+.taskon-leaderboard-modal__close:hover {
+  background-color: var(--taskon-leaderboard-text-darkest);
+  color: var(--taskon-leaderboard-text-lightest);
+}
+
+.taskon-leaderboard-modal__close svg {
+  width: 20px;
+  height: 20px;
+}
+
+/* 弹窗内容容器 - gap 20px */
+.taskon-leaderboard-modal__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--taskon-leaderboard-spacing-l);
+  padding: var(--taskon-leaderboard-spacing-l);
+  overflow-y: auto;
+}
+
+/* 描述文本 - 16px Regular 暗色 */
+.taskon-leaderboard-modal__desc {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  color: var(--taskon-leaderboard-text-dark);
+}
+
+/* 章节容器 - gap 8px */
+.taskon-leaderboard-modal__section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--taskon-leaderboard-spacing-xs);
+}
+
+/* 章节标题 - 16px Regular 稍亮暗色 */
+.taskon-leaderboard-modal__section-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  color: var(--taskon-leaderboard-text-light);
+}
+
+/* 时间范围 - 14px Medium 白色 */
+.taskon-leaderboard-modal__period {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: normal;
+  color: var(--taskon-leaderboard-text-lightest);
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+/* 奖励层级列表 - 无背景无边框，紧凑列表 */
+.taskon-leaderboard-modal__tiers {
+  display: flex;
+  flex-direction: column;
+  gap: var(--taskon-leaderboard-spacing-xs);
+}
+
+/* 奖励层级行 - flex 布局，gap 20px */
+.taskon-leaderboard-modal__tier {
+  display: flex;
+  align-items: center;
+  gap: var(--taskon-leaderboard-spacing-l);
+  padding: 0;
+  background-color: transparent;
+  border-radius: 0;
+}
+
+/* 排名范围 - 14px Regular 白色 */
+.taskon-leaderboard-modal__tier-rank {
+  flex-shrink: 0;
+  min-width: 70px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  color: var(--taskon-leaderboard-text-lightest);
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+/* 奖励内容容器 */
+.taskon-leaderboard-modal__tier-reward {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  color: var(--taskon-leaderboard-text-lightest);
+}
+
+/* 分配方式文本 - 16px SemiBold 白色 */
+.taskon-leaderboard-modal__tier-distribute {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  color: var(--taskon-leaderboard-text-lightest);
+}
+
+/* Token 图标容器 */
+.taskon-leaderboard-modal__tier-token {
+  display: flex;
+  align-items: center;
+  gap: var(--taskon-leaderboard-spacing-xs);
+}
+
+/* Token 图标 */
+.taskon-leaderboard-modal__tier-token-icon {
+  width: 26px;
+  height: 24px;
+  object-fit: contain;
+}
+
+/* 奖励金额 - 数字绿色，单位白色 */
+.taskon-leaderboard-modal__tier-amount {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+}
+
+.taskon-leaderboard-modal__tier-amount-value {
+  color: var(--taskon-leaderboard-primary);
+}
+
+.taskon-leaderboard-modal__tier-amount-symbol {
+  color: var(--taskon-leaderboard-text-lightest);
+}
+
+/* 隐藏旧的 tier-header 和 tier-count */
+.taskon-leaderboard-modal__tier-header {
+  display: none;
+}
+
+.taskon-leaderboard-modal__tier-count {
+  display: none;
+}
+
+/* ============================================================================
+   响应式
+   ============================================================================ */
+
+@media (max-width: 640px) {
+  .taskon-leaderboard-tabs {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .taskon-leaderboard-tabs__tab {
+    white-space: nowrap;
+  }
+
+  .taskon-leaderboard-header__reward-info {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .taskon-leaderboard-header__reward-rules-btn {
+    margin-left: 0;
+    width: 100%;
+  }
+
+  .taskon-leaderboard-pagination {
+    flex-wrap: wrap;
+  }
+
+  .taskon-leaderboard-pagination__btn-text {
+    display: none;
+  }
+}