/* skeleton.css — 加载态统一层（B1）
   设计取向：静态灰块 + 一行「加载中…」，无微光扫动、无动画噪音，与现有克制风格一致。
   与页面真实组件同尺寸同圆角，避免内容到达时的高度跳变。
   仅在 <html> 带 .js-img-fade 时启用图片淡入，保证无 JS 环境下图片照常显示。 */

/* ---------- 基础灰块 ---------- */
.sk {
  display: block;
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
}

/* 圆形占位（头像 / 徽章图） */
.sk-circle {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-surface-2);
  flex: 0 0 auto;
}

.sk-circle--lg { width: 56px; height: 56px; }

/* 文字行占位 */
.sk-line {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: var(--color-surface-2);
}

.sk-line + .sk-line { margin-top: 8px; }

/* ---------- 徽章瓦片骨架（对齐 .pf-badge 盒模型） ---------- */
.sk-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: var(--spacing-md) var(--spacing-sm);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface-1);
  text-align: center;
  min-width: 0;
}

.sk-badge .sk-line:first-of-type { width: 70%; }
.sk-badge .sk-line:last-of-type { width: 45%; height: 8px; }

/* ---------- 列表行骨架（对齐 .settings-row） ---------- */
.sk-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.sk-row .sk-line { flex: 1 1 auto; height: 14px; }
.sk-row .sk-line--short { flex: 0 0 64px; }

/* ---------- 加载提示 / 失败态 ---------- */
.sk-note {
  margin: var(--spacing-md) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  text-align: center;
}

.load-error {
  padding: var(--spacing-lg) var(--spacing-md);
  text-align: center;
  color: var(--color-text-secondary);
}

.load-error p {
  margin: 0 0 var(--spacing-md);
  font-size: var(--font-size-sm);
}

/* 空状态「重新加载」按钮直接复用 ui.css 的 .btn-retry（Primary 样式），
   不再单独覆写，保证与 module-btn / btn-primary 视觉一致。 */

/* ---------- 勋章图淡入 ---------- */
/* 图片先由骨架/灰底占位，各自加载完成后淡入；失败则回落到内置 SVG 徽章 */
.js-img-fade .badge-img {
  opacity: 0;
  transition: opacity var(--duration-base, .28s) var(--ease-smooth);
}

.js-img-fade .badge-img.is-ready { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .js-img-fade .badge-img { transition: none; }
}

/* ---------- 身份区加载态（我的页） ---------- */
.pf-id-loading { display: flex; flex-direction: column; gap: 6px; }
.pf-id-loading .sk-line { height: 12px; }

/* 头像容器本身是品牌渐变底，占位圆需反色才可见 */
.pf-avatar .sk-circle { background: rgba(255, 255, 255, .38); }