/* ==========================================================================
   宜宇 · 户外成就徽章系统（2026-09-19）
   --------------------------------------------------------------------------
   与 Level.php 的关系：
     等级 = 段位（experience 驱动，自动升降），用头像环 + 昵称旁小标签表达
     徽章 = 荣誉（具体行为达成，永久保留），用图标表达
     两者并存，昵称旁的排布顺序是：【等级标签】+【昵称】+【徽章组】

   稀有度色板（与 Badge::RARE 一一对应，改一处必须同步另一处）：
     common #5b8c6e / rare #2f7fd6 / epic #8b4fd6 / legend #d99a1e / admin #c0392b

   全站特效只给 legend / admin：
     · 头像外圈旋转光晕（conic-gradient + 动画）
     · 昵称流光（background-clip: text + 位移动画）
   动效统一受 prefers-reduced-motion 约束，晕动症用户自动降级为静态。
   ========================================================================== */

.yq-badges {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  vertical-align: middle;
  margin-left: 4px;
  flex: 0 0 auto;
}

/* 单枚徽章
   --------------------------------------------------------------------------
   20261021xz8：图形从 emoji 换成 24 网格线性 SVG（见 YqBadge.vue 的 BADGE_ICONS）。
   因此这里**不再有彩色底块**：emoji 需要底色托才有形，线性图标反而是裸着最清楚，
   也才对得上设计规范（无 emoji / 线性 stroke 1.8 / 无渐变 / 不做发光）。
   稀有度只体现在 `color` 上，图标本身 currentColor 上色。 */
.yq-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  position: relative;
  color: #5b8c6e; /* 兜底色（普通档），实际由下面的 .yq-badge--<rare> 决定 */
  cursor: help;
  transition: transform .16s ease;
}
.yq-badge > svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* 老 DOM（PHP 侧/历史缓存）如果还带 <i>emoji</i>，直接隐掉，不让 emoji 漏出来 */
.yq-badge > i { display: none; }

@media (hover: hover) {
  .yq-badge:hover { transform: translateY(-1px) scale(1.08); }
}

/* ---- 稀有度着色（只改颜色，不改形）---- */
.yq-badge--common { color: #5b8c6e; }
.yq-badge--rare   { color: #2f7fd6; }
.yq-badge--epic   { color: #8b4fd6; }
/* 传说 / 管理用压深一档的金与红 —— 15px 细线上 #d99a1e / #c0392b 对比不足，会糊 */
.yq-badge--legend { color: #9a6a0c; }
.yq-badge--admin  { color: #b3342a; }

/* 超出的徽章折成 +N */
.yq-badge__more {
  display: inline-flex;
  align-items: center;
  height: 15px;
  padding: 0 4px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--yq-muted, #6b7a72);
  background: var(--yq-chip, #eef2ef);
  cursor: help;
}

/* ---- 等级标签（段位）---- */
.yq-lv {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 15px;
  padding: 0 4px;
  margin-right: 4px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2px;
  color: #fff;
  flex: 0 0 auto;
  vertical-align: middle;
  white-space: nowrap;
  /* 数字用等宽感，避免 Lv1 / Lv10 宽度跳动 */
  font-variant-numeric: tabular-nums;
}
/* tier 递进：1 浅绿 → 5 金 */
.yq-lv[data-tier="1"] { background: #9bb8a8; }
.yq-lv[data-tier="2"] { background: #4caf70; }
.yq-lv[data-tier="3"] { background: #1a7a4a; }
.yq-lv[data-tier="4"] { background: linear-gradient(135deg,#e0b040,#c8961e); color:#4a3403; }
.yq-lv[data-tier="5"] { background: linear-gradient(135deg,#ffd964,#e0932a); color:#4a3403;
                        box-shadow: 0 0 6px rgba(224,147,42,.5); }

/* ==========================================================================
   全站特效：传说 / 管理员
   ========================================================================== */

/* 光晕容器：给头像套一圈旋转的 conic-gradient */
.yq-legend-ava {
  position: relative;
  display: inline-block;
  border-radius: 50%;
  flex: 0 0 auto;
}
.yq-legend-ava::before {
  content: '';
  position: absolute;
  inset: -2.5px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #ffd964, #e0932a, #c8961e, #fff3c4, #e0932a, #ffd964
  );
  animation: yqHaloSpin 3.2s linear infinite;
  z-index: 0;
  /* 让光晕只在外圈显形，不盖住头像 */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
}
/* 管理员用赤金光晕 */
.yq-legend-ava--admin::before {
  background: conic-gradient(from 0deg, #e05a4a, #96291d, #fff0ee, #c0392b, #e05a4a);
}
.yq-legend-ava > * { position: relative; z-index: 1; }

@keyframes yqHaloSpin { to { transform: rotate(360deg); } }

/* 昵称流光 */
.yq-legend-name {
  background-image: linear-gradient(
    100deg,
    currentColor 0%, currentColor 38%,
    #f6c445 48%, #fff6d0 52%, #f6c445 56%,
    currentColor 66%, currentColor 100%
  );
  background-size: 260% 100%;
  background-position: 120% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: yqNameFlow 4.5s ease-in-out infinite;
  /* 没有 background-clip 支持时回退到原色 */
  color: inherit;
}
.yq-legend-name--admin {
  background-image: linear-gradient(
    100deg,
    currentColor 0%, currentColor 38%,
    #e05a4a 48%, #ffd9d3 52%, #e05a4a 56%,
    currentColor 66%, currentColor 100%
  );
}
@keyframes yqNameFlow {
  0%, 62%   { background-position: 120% 0; }
  100%      { background-position: -40% 0; }
}

/* 卡片描边 —— 2026-09-21 用户定版：全站所有卡片统一用 hero（.hsq）同款
   薄荷绿单层边框，传说/管理员不再用金/红描边区分（身份靠角标徽章表达）。
   历史备注：最初是 box-shadow「0 0 0 1px 外圈」（双边框 bug），
   2026-09-21 上午改金/红 border-color（用户仍要求薄荷绿）→ 现在彻底统一。
   ⚠️ 别再把这里的描边改回身份色 —— 已经返工两次了。 */
.yq-post--legend,
.yq-post--admin {
  border-color: var(--mint-300, #74e3da);
  box-shadow: none;
}
html[data-theme="dark"] .yq-post--legend,
html[data-theme="dark"] .yq-post--admin  { border-color: var(--mint-700, #149270); }

/* 徽章悬浮说明（纯 CSS，不引 JS） */
.yq-badge[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%) translateY(2px);
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(28, 36, 32, .94);
  color: #fff;
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  z-index: 30;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (hover: hover) {
  .yq-badge[data-tip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ==========================================================================
   深色主题适配
   ========================================================================== */
/* 深色主题适配（20261021xz8：小徽章已无底块，只提亮描边色） */
html[data-theme="dark"] .yq-badge--common { color: #8fc0a3; }
html[data-theme="dark"] .yq-badge--rare   { color: #7fb3e8; }
html[data-theme="dark"] .yq-badge--epic   { color: #ba92ea; }
html[data-theme="dark"] .yq-badge--legend { color: #e0b45a; }
html[data-theme="dark"] .yq-badge--admin  { color: #e88478; }
html[data-theme="dark"] .yq-badge--more,
html[data-theme="dark"] .yq-badge__more   { background: #232c27; color: #97a89d; }
html[data-theme="dark"] .yq-badge[data-tip]::after { background: rgba(240, 246, 242, .95); color: #16201a; }

/* ==========================================================================
   荣誉墙（个人主页）
   ========================================================================== */
.yq-wall {
  margin: 14px 0 6px;
  padding: 14px;
  border-radius: 14px;
  background: var(--yq-card, #fff);
  border: 1px solid var(--yq-line, #e8ece9);
}
.yq-wall__hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.yq-wall__t {
  font-size: 14px;
  font-weight: 700;
  color: var(--yq-text, #1b2620);
}
.yq-wall__n {
  font-size: 12px;
  color: var(--yq-muted, #6b7a72);
  font-variant-numeric: tabular-nums;
}
.yq-wall__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 10px;
}
.yq-wcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 9px 4px 8px;
  border-radius: 11px;
  background: var(--yq-chip, #f4f7f5);
  border: 1px solid transparent;
  text-align: center;
  transition: transform .15s ease, border-color .15s ease;
}
@media (hover: hover) {
  .yq-wcard:hover { transform: translateY(-2px); }
}
.yq-wcard__i {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}
/* 20261021xz8：卡片图标也换成线性 SVG，容器尺寸不变，只给它一个内缩的盒子 */
.yq-wcard__i > svg { width: 21px; height: 21px; display: block; }
.yq-wcard__n {
  font-size: 11px;
  font-weight: 600;
  color: var(--yq-text, #1b2620);
  line-height: 1.25;
  word-break: break-all;
}
.yq-wcard__r {
  font-size: 9.5px;
  padding: 0 5px;
  border-radius: 4px;
  color: #fff;
  line-height: 14px;
}

/* 稀有度底（荣誉墙卡片图标）
   20261021xz8：legend / admin 原来的渐变底 + 外发光去掉，改纯色浅底 —— 规范不允许渐变，
   而且深色线性图标压在渐变金上几乎看不见。图标颜色统一由 color 给，浅底只负责分区。 */
.yq-wcard--common .yq-wcard__i { background: #e8f0ea; color: #4a7a5c; }
.yq-wcard--rare   .yq-wcard__i { background: #e4effb; color: #2f7fd6; }
.yq-wcard--epic   .yq-wcard__i { background: #efe6fa; color: #8b4fd6; }
.yq-wcard--legend .yq-wcard__i { background: #fbefcf; color: #8a5f06; box-shadow: none; }
.yq-wcard--admin  .yq-wcard__i { background: #fbe4e0; color: #a92e21; box-shadow: none; }
/* 未获得：灰化 + 虚线框 */
.yq-wcard--locked { opacity: .52; }
.yq-wcard--locked .yq-wcard__i {
  background: var(--yq-chip, #f0f3f1) !important;
  box-shadow: none !important;
  filter: grayscale(1) opacity(.5);
}
.yq-wcard--locked .yq-wcard__n { font-weight: 500; color: var(--yq-muted, #6b7a72); }

/* 进度（未获得时显示"3/10"） */
.yq-wcard__p {
  font-size: 9.5px;
  color: var(--yq-muted, #6b7a72);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.yq-wcard__bar {
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: var(--yq-line, #e2e8e4);
  overflow: hidden;
  margin-top: 2px;
}
.yq-wcard__bar > i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--brand-500, #1fbe66);
  transition: width .4s ease;
}

/* 稀有度图例 */
.yq-legend-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--yq-line, #e8ece9);
  font-size: 11px;
  color: var(--yq-muted, #6b7a72);
}
.yq-legend-row > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.yq-legend-row i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  font-style: normal;
  flex: 0 0 auto;
}

/* 深色主题：荣誉墙 */
html[data-theme="dark"] .yq-wall {
  background: var(--yq-card, #1a211d);
  border-color: var(--yq-line, #2c3730);
}
html[data-theme="dark"] .yq-wcard { background: var(--yq-chip, #222b25); }
html[data-theme="dark"] .yq-wcard--common .yq-wcard__i { background: #223028; }
html[data-theme="dark"] .yq-wcard--rare   .yq-wcard__i { background: #1c2a3c; }
html[data-theme="dark"] .yq-wcard--epic   .yq-wcard__i { background: #2a1f3a; }

/* ==========================================================================
   窄屏压缩：昵称旁不能占太多
   ========================================================================== */
@media (max-width: 360px) {
  .yq-badges { gap: 1.5px; margin-left: 3px; }
  .yq-badge { width: 14px; height: 14px; font-size: 9px; border-radius: 3.5px; }
  .yq-lv { height: 14px; padding: 0 3px; font-size: 9px; }
  .yq-wall__grid { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 8px; }
}

/* ==========================================================================
   无障碍：晕动症用户关闭所有动画
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .yq-legend-ava::before { animation: none; }
  .yq-legend-name { animation: none; background-position: 120% 0; }
  .yq-badge, .yq-wcard { transition: none; }
}

/* ==========================================================================
   评论昵称颜色随等级变化（用户要求：徽章等级评论颜色也不一样）

   【选择器为什么要写成类名列表，而不是只用 .cm-item__n】
     全站有**两套**评论 DOM：
       · PHP 详情页  →  .cm-item__n          （tpl/t_show.php）
       · Nuxt 详情页 →  .cm-item__n          （pages/show.vue）
       · Nuxt 短视频流评论抽屉 → .vf__cm__nb  （components/VideoFeed.vue）
     前两个共用 .cm-item__n，第三个是视频流独立的命名。
     如果只写 .cm-item__n，视频流里 data-tier 就渲染了却完全没有颜色 ——
     一个「属性在、样式不在」的静默失效，最难发现。

   【为什么用 [data-tier] 而不是给每个类都写一遍】
     颜色规则只有一处定义（这里），任何新增评论容器只要带上
     data-tier 就自动继承配色，不需要回来改这个文件。
   ========================================================================== */
.cm-item__n[data-tier="1"], .vf__cm__nb[data-tier="1"] { color: #4a5a51; }
.cm-item__n[data-tier="2"], .vf__cm__nb[data-tier="2"] { color: #2f7a4e; }
.cm-item__n[data-tier="3"], .vf__cm__nb[data-tier="3"] { color: #17693c; font-weight: 600; }
.cm-item__n[data-tier="4"], .vf__cm__nb[data-tier="4"] { color: #b07d10; font-weight: 700; }
.cm-item__n[data-tier="5"],
.vf__cm__nb[data-tier="5"] {
  color: #d17f1a;
  font-weight: 700;
  background-image: linear-gradient(100deg, #d17f1a 0%, #d17f1a 38%, #f6c445 48%, #fff6d0 52%, #f6c445 56%, #d17f1a 66%, #d17f1a 100%);
  background-size: 260% 100%;
  background-position: 120% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: yqNameFlow 4.5s ease-in-out infinite;
}
.cm-item__n[data-admin="1"],
.vf__cm__nb[data-admin="1"] {
  color: #c0392b !important;
  font-weight: 700;
}
html[data-theme="dark"] .cm-item__n[data-tier="1"],
html[data-theme="dark"] .vf__cm__nb[data-tier="1"] { color: #9db3a6; }
html[data-theme="dark"] .cm-item__n[data-tier="2"],
html[data-theme="dark"] .vf__cm__nb[data-tier="2"] { color: #6ecf94; }
html[data-theme="dark"] .cm-item__n[data-tier="3"],
html[data-theme="dark"] .vf__cm__nb[data-tier="3"] { color: #43c47c; }
html[data-theme="dark"] .cm-item__n[data-tier="4"],
html[data-theme="dark"] .vf__cm__nb[data-tier="4"] { color: #e0b040; }

/* --- 短视频流评论抽屉的光晕/徽章适配（2026-09-19） ------------------------
   评论抽屉是浅底（--bg-raise-2），跟详情页评论一致，配色沿用即可。
   但子评论昵称外面还包了 <b>，颜色继承会断在 <b> 上 —— 显式补一条。 */
.vf__cm__sub .vf__cm__nb[data-tier="5"],
.vf__cm__sub .vf__cm__nb[data-tier="5"] b {
  -webkit-text-fill-color: transparent;
}
.vf__cm__sub .vf__cm__nb[data-admin="1"],
.vf__cm__sub .vf__cm__nb[data-admin="1"] b { color: #c0392b !important; }

/* 评论昵称旁的徽章组：视频流里同样最多 3 枚，尺寸跟详情页一致 */
.vf__cm__n .yq-badges { flex: 0 0 auto; margin-left: 2px; }
.vf__cm__n .yq-badge { font-size: 10px; }
/* 视频流底部作者行的徽章组：略大一点，因为那是主要身份展示位 */
.vf__by .yq-badge { font-size: 11px; }


/* ==========================================================================
 * 布局适配层（2026-09-19）
 *
 * 徽章是「后加的节点」，会挤到已有的 flex 排布。这里只做一件事：
 * 让「头像 + 昵称 + 徽章组」三者在**任意长度昵称**下都不破版。
 *
 * 原始约束（app.css / app2026.css）：
 *   .yq-post__nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
 *   a.yq-post__u .yq-post__nm { flex: 0 1 auto; }
 * 昵称写成 flex:1 会把徽章组一路推到卡片最右边（甚至推出可视区），
 * 所以这里把「昵称」的可伸缩权收回，改成「昵称先省略、徽章永远完整」。
 * ========================================================================== */

/* --- 帖子卡作者区 --------------------------------------------------------- */
a.yq-post__u .yq-post__nm {
  flex: 0 1 auto;
  min-width: 0;              /* 允许收缩到 0，靠 ellipsis 截断 */
  max-width: 9.5em;          /* 昵称上限：再长就省略，把位置让给徽章 */
}
/* 徽章组在卡里必须不可压缩：宁可昵称变短，也不能把徽章折行/裁掉 */
a.yq-post__u .yq-badges {
  flex: 0 0 auto;
  max-width: 4.6em;          /* 约 3 枚 13px 徽章，超出由 +N 收起 */
  overflow: hidden;
}
a.yq-post__u .yq-badge,
a.yq-post__u .yq-badge__more { flex: 0 0 auto; }

/* 传说/管理员的头像光晕外层：不能改变头像自身的尺寸盒 */
.yq-legend-ava {
  display: inline-flex;
  flex: 0 0 auto;
  position: relative;
  border-radius: var(--r-full, 999px);
}
.yq-legend-ava > img,
.yq-legend-ava > .yq-ava { display: block; }

/* --- 详情页作者区：昵称 / 等级 / 徽章 同一行 ------------------------------ */
.sh-hd__nwrap {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.sh-hd__nwrap .sh-hd__n {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 11em;
  flex: 0 1 auto;
}
.sh-hd__nwrap .yq-lv,
.sh-hd__nwrap .yq-badges { flex: 0 0 auto; }

/* 卡片右上角视频/图片角标与底部徽章互不干扰（徽章在 __foot，不绝对定位） */
.yq-post__foot .yq-badges { vertical-align: middle; }

/* 详情页评论昵称旁的徽章组（PHP/Nuxt 两处评论 DOM 共用） */
.cm-item__hd .yq-badges {
  flex: 0 0 auto;
  margin-left: 2px;
}
.cm-item__hd .yq-badge { font-size: 10px; }

/* --- 个人主页资料区：昵称 + 等级 + 徽章 ---------------------------------- */
.pf__name .yq-lv,
.pf__name .yq-badges { vertical-align: middle; }
.pf__name .yq-badges { margin-left: 2px; }

/* ==========================================================================
 * ★★★ 深色主题 —— 徽章主样式表里只覆盖了部分选择器，
 *     这里补齐「布局层在深色下不需要变色」的说明，避免以后误以为漏了。
 *     真正需要变色的（.yq-badge--* 底色、.yq-wall 背景）已在文件上半部分
 *     的 html[data-theme="dark"] 段里处理。
 * ========================================================================== */

/* 极窄屏（≤360px：iPhone SE / 老安卓）—— 昵称让位给徽章 */
@media (max-width: 360px) {
  a.yq-post__u .yq-post__nm { max-width: 6.5em; }
  .sh-hd__nwrap .sh-hd__n { max-width: 7em; }
}

/* 打印/无障碍：光晕与流光在静止介质上无意义，去掉动画只留颜色 */
@media print, (prefers-reduced-motion: reduce) {
  .yq-legend-ava::before { animation: none !important; }
  .yq-legend-name {
    animation: none !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--brand-600, #12a054) !important;
  }
}


/* ==========================================================================
 *  「我的」页（/me）的徽章摘要条 —— 2026-09-20
 * --------------------------------------------------------------------------
 *  为什么放 badge.css 而不是首页级/页面级样式表：
 *    /me 在 PHP 与 Nuxt **两端都有**（PHP 走 tpl/t_me.php，Nuxt 走 pages/me.vue），
 *    badge.css 是两端共用的唯一真源，放这里才能保证两条链路口径一致。
 *
 *  为什么不直接铺大卡：/me 首屏要同时放下资料、4 个计数入口、报名的活动。
 *  徽章在这里只承担「入口」职责 —— 一眼看到拿了几枚、有多少可申请，
 *  想看细节去 /badge（那里才是大卡 + 进度条）。
 * ========================================================================== */
.pr-mbadge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px var(--sp-3, 12px) 0;
  padding: 9px 12px;
  border-radius: var(--r-sm, 10px);
  border: 1px solid var(--line, #e6efe9);
  background: var(--bg-raise, #fff);
  text-decoration: none;
  color: inherit;
  min-height: 44px;              /* 适老：可点区域 ≥44px */
  -webkit-tap-highlight-color: transparent;
  transition: background .18s var(--ease-out, ease);
}
.pr-mbadge:active { background: var(--bg-sunken, #eaf3ed); }
.pr-mbadge__t { font-size: .82rem; font-weight: 700; flex: 0 0 auto; }
.pr-mbadge__l {
  display: flex; align-items: center; gap: 3px;
  min-width: 0; flex: 1 1 auto;
}
.pr-mbadge__e { font-size: .76rem; color: var(--t3, #93a29a); }
.pr-mbadge__n {
  flex: 0 0 auto;
  font-size: .74rem; font-weight: 700;
  color: var(--brand-700, #0d7f43);
  background: var(--grad-brand-soft, rgba(31,190,102,.12));
  border-radius: var(--r-full, 999px);
  padding: 3px 8px;
}
.pr-mbadge__a {
  flex: 0 0 auto; display: inline-flex;
  color: var(--t3, #93a29a);
}
/* .yq-badge 默认 15px —— 在这条里太小看不清，放大一档 */
.pr-mbadge__l .yq-badges { margin-left: 0; }
.pr-mbadge__l .yq-badge { width: 19px; height: 19px; font-size: 12px; border-radius: 5px; }

html[data-theme="dark"] .pr-mbadge__n { color: var(--brand-300, #7ce4a8); }

/* 极窄屏（≤360px）：只留徽章 + 计数，去掉「荣誉墙」文字 */
@media (max-width: 360px) {
  .pr-mbadge__t { display: none; }
}

/* --------------------------------------------------------------------------
 *  徽章墙底部提示（2026-09-20）
 *  「可申请」三个字如果只标在灰卡上，用户不知道下一步做什么。
 *  这里给一句明确的行动指引 + 链接。
 * -------------------------------------------------------------------------- */
.yq-wall__note {
  margin: 10px 0 0;
  padding: 9px 11px;
  border-radius: var(--r-sm, 10px);
  background: var(--bg-sunken, #eaf3ed);
  border: 1px solid var(--line, #e6efe9);
  font-size: .76rem;
  line-height: 1.75;
  color: var(--t2, #5d6b63);
}
.yq-wall__note a {
  color: var(--brand-600, #12a054);
  font-weight: 700;
  text-decoration: none;
}


/* ==========================================================================
   20260922up1 · 荣誉墙：申请徽章入口 + 分页控件
   --------------------------------------------------------------------------
   徽章一多，荣誉墙被拉成长龙，下面的「作品/商品/收藏/活动」被挤到看不见。
   改成每页 8 个 + 翻页；标题栏右侧给本人挂一个「申请徽章」。
   ========================================================================== */
.yq-wall__hl {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.yq-wall__apply {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--brand-600, #12a054);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .15s ease, opacity .15s ease;
}
.yq-wall__apply:active { transform: scale(.95); }
.yq-wall__pg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
}
.yq-wall__pg b {
  min-width: 54px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--yq-muted, #6b7a72);
  font-variant-numeric: tabular-nums;
}
.yq-wall__pg button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--yq-line, #e8ece9);
  background: var(--yq-card, #fff);
  color: var(--yq-text, #1b2620);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .15s ease;
}
.yq-wall__pg button:disabled {
  opacity: .35;
  cursor: default;
}
html[data-theme="dark"] .yq-wall__pg button {
  background: var(--yq-chip, #222b25);
  border-color: var(--yq-line, #333c36);
  color: var(--yq-text, #eaf2ee);
}