/* ============================================================
   销量榜页 (/leaderboard/) — page-leaderboard.php
   平实电商风：按累计销量降序的作品卡网格,复用首页「最新作品」同款 .b-works-grid + card-work。
   网格 / 卡片 / 角标基样式来自 components.css(全站)；本文件只加「排名角标」配色
   (card-work 仅在销量榜传入 rank 时渲染 .b-badge--rank,故配色随本页 CSS 一起加载、不影响他页)。
   依赖 tokens.css；对照首页风格；PC = 移动同等、暗色全量。
   ============================================================ */

.b-sales-board .b-works-grid { margin-top: var(--s-2); }

/* 排名角标：承 .b-badge 基样式(高 22 / 圆角 / 字号)；这里只定底色 + 数字对齐。
   前三名金 / 银 / 铜(深字提对比),其余深色实底白字。 */
.b-badge--rank   { background: rgba(20, 20, 36, 0.82); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.b-badge--rank-1 { background: linear-gradient(135deg, #f7b500, #ea8a00); color: #3a2600; }
.b-badge--rank-2 { background: linear-gradient(135deg, #ccd3db, #9aa7b5); color: #2a2f36; }
.b-badge--rank-3 { background: linear-gradient(135deg, #dca06f, #b9743f); color: #3a2410; }

/* ============================================================
   榜单切换 tab（作品榜 / 创作者榜，s11 机制①）—— 平实 pill 链接，全令牌、暗色自动。
   ============================================================ */
.b-lb-tabs { display: flex; gap: var(--s-2); margin: 0 0 var(--s-5); }
/* 〔续25 用户拍板〕作品榜/创作者榜 tab 与「逛全部作品」同排：tab 居左、逛全部 space-between 居右，移动端不换行。 */
.b-section__head.b-lb-head { align-items: center; flex-wrap: nowrap; }
.b-lb-head .b-lb-tabs { margin: 0; }
.b-lb-tab {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-5);
	border: 1px solid var(--line); border-radius: var(--r-pill);
	background: var(--bg-0); color: var(--ink-1); font-size: 14px; font-weight: 600; text-decoration: none;
	transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.b-lb-tab:hover { border-color: var(--brand); color: var(--brand); }
.b-lb-tab.is-active { background: var(--brand-solid); border-color: var(--brand); color: #fff; }

/* ============================================================
   创作者榜（近 30 天真实成交件数）—— 平实列表行：排名 + 头像 + 名/件数 + 进店。
   ============================================================ */
.b-cboard { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
/* 创作者榜：桌面（≥1024）一排 2 列（s12 批43，2026-06-14 用户：至少一排 2 列；通栏太空）。每列约 ≥480px、
   行内容（排名+头像+名+「近30天成交N件」+进店逛逛）从容；平板/移动（<1024）仍单列。排名按行优先 1|2 / 3|4。 */
@media (min-width: 1024px) { .b-cboard { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.b-cboard__row {
	display: flex; align-items: center; gap: var(--s-4); padding: var(--s-2) var(--s-5);
	border: 1px solid var(--line); border-radius: var(--r-3); background: var(--bg-0);
}
.b-cboard__rank {
	flex: 0 0 36px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%; background: var(--bg-2); color: var(--ink-2);
	font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums;
}
/* 前三名金/银/铜（与作品榜排名角标同材质、深字提对比，主题无关字面量、明暗恒可读）。 */
.b-cboard__rank--1 { background: linear-gradient(135deg, #f7b500, #ea8a00); color: #3a2600; }
.b-cboard__rank--2 { background: linear-gradient(135deg, #ccd3db, #9aa7b5); color: #2a2f36; }
.b-cboard__rank--3 { background: linear-gradient(135deg, #dca06f, #b9743f); color: #3a2410; }
.b-cboard__avatar { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.b-cboard__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.b-cboard__name { font-size: 15px; font-weight: 700; color: var(--ink-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-cboard__name a { color: inherit; text-decoration: none; }
.b-cboard__name a:hover { color: var(--brand); }
.b-cboard__verified { color: var(--success-strong); font-weight: 800; margin-left: 2px; }
.b-cboard__sub { font-size: 13px; color: var(--ink-3); }
.b-cboard__sub strong { color: var(--ink-1); }
.b-cboard__shop { flex: 0 0 auto; white-space: nowrap; }
.b-cboard__foot { margin: var(--s-4) 0 0; font-size: 12.5px; color: var(--ink-3); }

/* 窄屏：行内进店按钮换行到信息下方，不挤名字。 */
@media (max-width: 480px) {
	.b-cboard__row { flex-wrap: wrap; }
	.b-cboard__shop { margin-left: calc(36px + 44px + var(--s-4) * 2); }
}