/* ==========================================================================
   FlintHub — 排行榜插件（右栏面板）样式
   
   面板外框 / 标题 / 列表 / 条目 / 数值**全部复用核心 .mn-* 类**（与「站点统计」
   面板像素级一致），此处只补核心没有的两块：tab 条 + 排名序号/头像。
   
   ⚠️ 颜色一律走既有 --mn-* 主题变量（9 套主题全量覆盖，已逐条核对），
      禁止硬编码色值 —— 否则暗夜星辰主题下会出现「浅底浅字」失读（§11.7）。
   ⚠️ 选择器一律带 .lb-panel 前缀提权：核心同特异性声明因源序靠后会静默压掉插件样式。
   ⚠️ 纯 CSS tab（radio + :checked + 兄弟选择器），零 JS、零内联。
   ========================================================================== */

.lb-panel {
    position: relative; /* 给隐藏的 radio 提供定位上下文，避免它跑到页面左上角 */
}

/* ---------- 隐藏的原生 radio ---------- */
.lb-panel .lb-radio {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* ---------- tab 条 ---------- */
.lb-panel .lb-tabs {
    display: flex;
    gap: 2px;
    margin: 0 0 10px;
    border-bottom: 1px solid var(--mn-border-light, #e5e7eb);
}

.lb-panel .lb-tab {
    flex: 1;
    padding: 5px 0;
    margin-bottom: -1px;
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
    color: var(--mn-text-muted, #888);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    user-select: none;
    transition: color .15s ease, border-color .15s ease;
}

.lb-panel .lb-tab:hover {
    color: var(--mn-text, #333);
}

/* 激活态：与 :checked radio 同序号的 label（序号对应关系由 nth-of-type / nth-child 保证） */
.lb-panel .lb-radio:nth-of-type(1):checked ~ .lb-tabs .lb-tab:nth-child(1),
.lb-panel .lb-radio:nth-of-type(2):checked ~ .lb-tabs .lb-tab:nth-child(2),
.lb-panel .lb-radio:nth-of-type(3):checked ~ .lb-tabs .lb-tab:nth-child(3),
.lb-panel .lb-radio:nth-of-type(4):checked ~ .lb-tabs .lb-tab:nth-child(4) {
    color: var(--mn-primary, #0066cc);
    border-bottom-color: var(--mn-primary, #0066cc);
    font-weight: 600;
}

/* ---------- pane 显隐 ---------- */
.lb-panel .lb-pane {
    display: none;
}

.lb-panel .lb-radio:nth-of-type(1):checked ~ .lb-panes .lb-pane:nth-child(1),
.lb-panel .lb-radio:nth-of-type(2):checked ~ .lb-panes .lb-pane:nth-child(2),
.lb-panel .lb-radio:nth-of-type(3):checked ~ .lb-panes .lb-pane:nth-child(3),
.lb-panel .lb-radio:nth-of-type(4):checked ~ .lb-panes .lb-pane:nth-child(4) {
    display: block;
}

/* ---------- 榜单条目（在核心 .mn-stat-item 基础上补布局） ---------- */
.lb-panel .mn-stat-item {
    gap: 8px;
}

.lb-panel .mn-stat-label {
    flex: 1;
    min-width: 0;
}

.lb-panel .mn-stat-value {
    flex: none;
}

/* 排名序号：固定宽度保证多行数字左对齐 */
.lb-panel .lb-rank {
    flex: none;
    width: 13px;
    font-style: normal;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    color: var(--mn-text-muted, #888);
}

/* 前三名：仅用主色 + 加粗（不引入金银铜硬编码色，避免夜间主题失读） */
.lb-panel .lb-rank-top {
    color: var(--mn-primary, #0066cc);
    font-weight: 700;
}

/* 头像 / 无头像时的首字占位 */
.lb-panel .lb-avatar {
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
}

.lb-panel .lb-avatar-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
    color: var(--mn-primary, #0066cc);
    background: var(--mn-primary-subtle, #e6f0fa);
}

/* 用户名：长名截断（hover 用 title 看全名） */
.lb-panel .lb-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--mn-text, #333);
    text-decoration: none;
}

.lb-panel .lb-name:hover {
    color: var(--mn-primary, #0066cc);
}

/* ---------- 空状态 ---------- */
.lb-panel .lb-empty {
    padding: 10px 0;
    font-size: 12px;
    text-align: center;
    color: var(--mn-text-muted, #888);
}