/* ==================================================================
 *  徽章中心（/badge）—— 2026-09-20
 * ------------------------------------------------------------------
 *  为什么单独成文件（而不是塞进 badge.css 或 app2026.css）：
 *    badge.css 是徽章体系的**唯一真源**，PHP 与 Nuxt 两端共用同一份，
 *    里面的 class 命名必须逐字一致。徽章中心是「PHP 端独有的一个页面」，
 *    把它挂进 badge.css 会让 Nuxt 也跟着多下载一份用不到的样式。
 *    → 页面级按需加载，走 layout.php 的 $v['css'] 约定。
 *
 *  ★ 变量必须用全站真名（app.css 的 :root）：
 *    没有 --card / --bg-2 / --line-2，写错会静默回落到 fallback 的亮色值，
 *    于是深色模式下页面还是白底 —— 这类 bug 只在深色模式才现形。
 *      --bg-raise 卡片底 / --bg-sunken 内嵌底 / --line 描边 / --line-strong 虚线描边
 *      --t1 主文字 / --t2 次文字 / --t3 弱文字
 *
 *  适老化：所有可点元素 ≥44px，字号用 rem 跟随根字号（大字模式有效）。
 * ================================================================== */

/* ---------- 顶部成绩单 ---------- */
.yq-bc__hero {
  margin: 0 0 var(--sp-4, 16px);
  padding: 20px 18px 18px;
  border-radius: 0 0 var(--r-lg, 20px) var(--r-lg, 20px);
  background: linear-gradient(135deg, #1fbe66 0%, #12a054 58%, #0b6438 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.yq-bc__hero::after {
  content: "";
  position: absolute;
  right: -40px; top: -50px;
  width: 150px; height: 150px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .09);
  pointer-events: none;
}
.yq-bc__hd { display: flex; align-items: baseline; gap: 8px; }
.yq-bc__n  { font-size: 1.9rem; font-weight: 800; line-height: 1.1; letter-spacing: -.5px; }
.yq-bc__of { font-size: .88rem; opacity: .84; }
.yq-bc__t  { font-size: 1rem; font-weight: 700; margin: 6px 0 0; }
.yq-bc__d  { font-size: .82rem; opacity: .86; margin-top: 4px; line-height: 1.75; }

.yq-bc__stats {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  position: relative;
  z-index: 1;
}
.yq-bc__stat {
  flex: 1 1 0;
  min-width: 0;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-sm, 10px);
  padding: 8px 4px;
  text-align: center;
}
.yq-bc__stat b { display: block; font-size: 1.05rem; font-weight: 800; }
.yq-bc__stat span { display: block; font-size: .7rem; opacity: .86; margin-top: 1px; }

.yq-bc__prog {
  margin-top: 14px;
  height: 6px;
  border-radius: var(--r-full, 999px);
  background: rgba(255, 255, 255, .22);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.yq-bc__prog > i {
  display: block; height: 100%;
  border-radius: var(--r-full, 999px);
  background: linear-gradient(90deg, #ffe9a8, #ffc53d);
  transition: width .5s var(--ease-out, ease);
}

/* ---------- 分段切换 ---------- */
.yq-bc__seg { margin: 0 var(--sp-3, 12px) var(--sp-4, 16px); }

/* ---------- 需人工审核的徽章卡片 ---------- */
.yq-bc__apply {
  margin: 0 var(--sp-3, 12px) var(--sp-3, 12px);
  border: 1px solid var(--line, #e6efe9);
  border-radius: var(--r-md, 14px);
  background: var(--bg-raise, #fff);
  padding: 14px;
  box-shadow: var(--sh-1, none);
}
.yq-bc__atop { display: flex; align-items: center; gap: 10px; }
.yq-bc__aico {
  width: 42px; height: 42px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: var(--r-sm, 10px);
  font-size: 1.35rem;
  background: var(--bg-sunken, #eaf3ed);
}
.yq-bc__aname { font-size: .95rem; font-weight: 700; color: var(--text-primary, #17211b); }
.yq-bc__acond { font-size: .78rem; color: var(--text-third, #93a29a); margin-top: 2px; line-height: 1.65; }
.yq-bc__arare {
  margin-left: auto; flex: 0 0 auto;
  font-size: .7rem; font-weight: 700;
  padding: 3px 8px; border-radius: var(--r-full, 999px);
  color: #fff;
}
.yq-bc__astate { margin-top: 10px; }

/* ---------- 申请表单 ---------- */
.yq-bc__f { margin-top: 10px; }
.yq-bc__frow { margin-bottom: 10px; }
.yq-bc__fl {
  display: block;
  font-size: .78rem; font-weight: 600;
  color: var(--text-second, #5d6b63);
  margin: 0 0 5px;
}
.yq-bc__fi, .yq-bc__fta {
  width: 100%;
  border: 1px solid var(--line, #e6efe9);
  border-radius: var(--r-sm, 10px);
  padding: 10px 12px;
  font-size: .88rem;
  background: var(--bg-sunken, #eaf3ed);
  color: var(--text-primary, #17211b);
  outline: none;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px;            /* 手指点得中（适老 ≥44px） */
}
.yq-bc__fta { min-height: 88px; line-height: 1.75; resize: vertical; }
.yq-bc__fi:focus, .yq-bc__fta:focus {
  border-color: var(--brand-500, #1fbe66);
  background: var(--bg-raise, #fff);
}
.yq-bc__fhint { font-size: .72rem; color: var(--text-third, #93a29a); margin-top: 4px; line-height: 1.65; }

/* ---------- 底部说明块 ---------- */
.yq-bc__how {
  margin: 0 var(--sp-3, 12px);
  border-radius: var(--r-md, 14px);
  border: 1px dashed var(--line-strong, #dbe9e0);
  padding: 14px;
  background: var(--bg-raise-2, #f2f8f4);
}
.yq-bc__how h4 { margin: 0 0 8px; font-size: .9rem; font-weight: 700; color: var(--text-primary, #17211b); }
.yq-bc__how ol { margin: 0; padding-left: 20px; font-size: .82rem; color: var(--text-second, #5d6b63); line-height: 2; }

/* 【注】「我的」页顶部那条徽章摘要条（.pr-mbadge）不在这里 ——
   它两端（PHP / Nuxt）都要用，所以放在共用的 badge.css 里。 */