/* ==========================================================================
   FlintHub — 最新会员插件（右栏面板）样式

   面板外框 / 标题**复用核心 .mn-panel / .mn-panel-title**（与「站点统计」像素级一致），
   此处只补核心没有的那一块：4 列头像网格。

   ⚠️ 颜色一律走既有 --mn-* 主题变量（9 套主题 + modern.css 共 10 源全量覆盖，已逐条核对），
      禁止硬编码色值 —— 否则暗夜星辰主题下会出现「浅底浅字」失读（§11.7）。
   ⚠️ 选择器一律带 .nm-panel 前缀提权：核心同特异性声明因源序靠后会静默压掉插件样式。
   ⚠️ 零内联、零 JS。
   ========================================================================== */

/* ---------- 4 列 × 2 行网格 ---------- */
/* ★ 必须 minmax(0, 1fr)，不能写 1fr：
     1fr 的最小尺寸是 auto（= 内容最小宽），长用户名会把格子撑破而不是省略，
     与「flex-wrap:wrap 容器 min-content = 单个子项宽」同源的陷阱。 */
.nm-panel .nm-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 6px;
}

/* ---------- 单元格（整格是一个 <a>） ---------- */
.nm-panel .nm-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;             /* ★ 允许子元素 ellipsis，否则长名撑破格子 */
    text-decoration: none;
}

/* ---------- 头像（40px，比核心 .mn-user-avatar 的 44px 略小以适应 52px 格子） ---------- */
.nm-panel .nm-avatar {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

/* 无头像 → 首字占位（视觉对齐核心 .mn-user-avatar-placeholder） */
.nm-panel .nm-avatar-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    color: var(--mn-primary, #0066cc);
    background: var(--mn-primary-light, #e6f0fa);
}

/* ---------- 用户名（长名截断，hover 用 title 看全名） ---------- */
.nm-panel .nm-name {
    max-width: 100%;
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--mn-text-secondary, #666);
}

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