/* ============================================================
   会员中心（会员中心方案书 V1.1 §3.7 / §11）：导航账号区、认证页、/me 页面组
   依赖 tokens.css 设计变量；随 S3-S6 步骤扩展（设置表单/成就墙/记录/社交列表）。
   ============================================================ */

/* ---------- 按钮补充 ---------- */
.btn-sm { padding: 6px 12px; font-size: 13px; }

/* ---------- 导航账号区与头像 ----------
   已归位至 theme.css：.site-account / .account-menu* / .avatar* 服务于全站 header，
   而 member.css 只随 /me 页面组与部分列表页加载，留在本文件会让首页等页面的
   header 组件失去样式。 */

/* ---------- 认证页（登录/注册） ---------- */
.auth-wrap { display: flex; justify-content: center; padding: var(--space-5) var(--space-2); }
.auth-card { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; max-width: 400px; padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.auth-card__title { margin: 0; font-size: 22px; }
.auth-card__hint { margin: 0; color: var(--color-text-muted); font-size: 14px; }
.auth-card__error { margin: 0; padding: 8px 12px; border-radius: var(--radius-sm); background: rgba(217, 83, 79, .1); color: var(--color-danger); font-size: 14px; }
.auth-card__foot { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: 14px; text-align: center; }
.auth-card__foot a { color: var(--color-primary); }

/* ---------- 表单字段（认证页与设置页共用） ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { color: var(--color-text-muted); font-size: 14px; }
.field__input { height: 42px; padding: 0 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); font-size: 15px; }
.field__input:focus { outline: 2px solid rgba(74, 144, 217, .35); border-color: var(--color-primary); }
.field--inline { flex-direction: row; align-items: center; gap: 8px; color: var(--color-text-muted); font-size: 14px; }

/* ---------- /me 页面组 ---------- */
.member-shell { display: flex; flex-direction: column; gap: var(--space-3); max-width: 920px; margin: 0 auto; padding: var(--space-4) var(--space-2); }
.member-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.member-head__user { display: flex; align-items: center; gap: var(--space-2); }
.member-head__name { margin: 0; font-size: 20px; }
.member-head__email { margin: 2px 0 0; color: var(--color-text-muted); font-size: 14px; }
.member-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-2); }
.member-stat { display: flex; flex-direction: column; gap: 4px; align-items: center; padding: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.member-stat strong { font-size: 22px; color: var(--color-primary); }
.member-stat span { color: var(--color-text-muted); font-size: 13px; }

/* ---------- 设置页（S3 / §3.2） ---------- */
.member-flash { margin: 0; padding: 10px 14px; border-radius: var(--radius-sm); background: rgba(46, 158, 91, .1); color: var(--color-success); font-size: 14px; }
.member-cards { display: flex; flex-direction: column; gap: var(--space-2); }
.member-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.member-card--danger { border-color: rgba(217, 83, 79, .4); }
.member-card__title { margin: 0; font-size: 17px; }
.member-form { display: flex; flex-direction: column; gap: var(--space-2); max-width: 420px; }
.member-hint { margin: 6px 0 0; color: var(--color-text-muted); font-size: 13px; line-height: 1.5; }
.member-error { margin: 0; color: var(--color-danger); font-size: 14px; }
.member-avatar-row { display: flex; align-items: flex-start; gap: var(--space-3); }
.member-avatar-form { display: flex; flex-direction: column; gap: var(--space-1); }
.member-btn-danger { padding: 8px 20px; border: 0; border-radius: var(--radius-sm); background: var(--color-danger); color: var(--color-text-invert); font-size: 14px; cursor: pointer; }
.member-btn-danger:hover { filter: brightness(.94); }

/* ---------- 成就墙（S4 / §3.3.3） ---------- */
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-2); }
.ach-card { display: flex; flex-direction: column; gap: 6px; align-items: center; padding: var(--space-3) var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); text-align: center; opacity: .55; filter: grayscale(1); }
.ach-card.is-unlocked { opacity: 1; filter: none; border-color: rgba(242, 140, 60, .45); box-shadow: var(--shadow-sm); }
.ach-card__icon { font-size: 34px; line-height: 1; }
.ach-card__name { margin: 0; font-size: 15px; }
.ach-card__desc { margin: 0; min-height: 2.4em; color: var(--color-text-muted); font-size: 13px; line-height: 1.5; }
.ach-card__meta { margin: 0; color: var(--color-text-muted); font-size: 12px; }
.ach-card.is-unlocked .ach-card__meta { color: var(--color-accent-dark); }

/* ---------- 记录/收藏/关注（S5 / §3.4-3.6） ---------- */
.member-empty { margin: 0; padding: var(--space-4); background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius-md); color: var(--color-text-muted); text-align: center; }
.member-empty a { color: var(--color-primary); }
.member-pagination { display: flex; justify-content: center; }

/* 游戏记录行（§3.4.2）：左拼图/时间，右四项指标 */
.record-list { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.record-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.record-row__main { min-width: 200px; }
.record-row__title { color: var(--color-text); font-size: 15px; font-weight: 600; text-decoration: none; }
.record-row__title:hover { color: var(--color-primary); }
.record-row__meta { margin: 4px 0 0; color: var(--color-text-muted); font-size: 13px; }
.record-row__stats { display: flex; gap: var(--space-3); margin: 0; }
.record-row__stats div { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 56px; }
.record-row__stats dt { color: var(--color-text-muted); font-size: 12px; }
.record-row__stats dd { margin: 0; color: var(--color-text); font-size: 15px; font-weight: 600; }

/* 人物行（§3.5.2）：头像 + 昵称/关注时间 + 关注按钮 */
.person-list { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.person-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.person-row__main { flex: 1; min-width: 0; }
.person-row__name { font-size: 15px; }
.person-row__meta { margin: 2px 0 0; color: var(--color-text-muted); font-size: 13px; }

/* 卡片收藏按钮（§3.6.1）：右上角圆钮；未收藏描边，已收藏实心高亮 */
.pg-card__fav { position: absolute; top: 8px; right: 8px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .88); color: var(--color-text-muted); cursor: pointer; transition: color .125s, transform .125s; }
.pg-card__fav:hover { transform: scale(1.08); color: var(--color-accent-dark); }
.pg-card__fav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.pg-card__fav.is-favorited { color: var(--color-accent-dark); }
.pg-card__fav.is-favorited svg { fill: currentColor; stroke: currentColor; }

/* ---------- 首页升级与子页签（S6 / §3.7） ---------- */
.member-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.member-tabs a { padding: 7px 16px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-text); font-size: 14px; line-height: 1; text-decoration: none; transition: border-color .125s, color .125s, background .125s; }
.member-tabs a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.member-tabs a.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-invert); }

/* 统计卡链接化（/me 首页） */
.member-stats a.member-stat { text-decoration: none; transition: border-color .125s, box-shadow .125s; }
.member-stats a.member-stat:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }

/* 卡片区头（最近成就 / 最近记录） */
.member-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.member-card__head a { color: var(--color-primary); font-size: 14px; }
.ach-strip { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ach-strip__item { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--color-bg); border: 1px solid rgba(242, 140, 60, .45); border-radius: var(--radius-sm); font-size: 14px; }

/* ---------- 积分（积分制恢复 2026-09-15 增补） ---------- */
.points-summary { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.points-summary__item { display: flex; flex-direction: column; gap: 2px; min-width: 140px; padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.points-summary__item strong { color: var(--color-text); font-size: 22px; }
.points-summary__item span { color: var(--color-text-muted); font-size: 13px; }
.record-row__stats dd.points-plus { color: #1f9d5b; }
.record-row__stats dd.points-minus { color: #d64545; }

/* ---------- 签到（签到方案书 V1.0，2026-09-22） ---------- */
.checkin-strip { display: flex; align-items: center; gap: var(--space-2); padding: 12px var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); text-decoration: none; }
.checkin-strip:hover { border-color: var(--color-primary); }
.checkin-strip__text { flex: 1 1 auto; font-size: 14px; }
.checkin-strip__streak { color: var(--color-text-muted); font-size: 13px; }
.checkin-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); }
.checkin-btn { min-width: 120px; }
.checkin-btn:disabled { opacity: .6; cursor: default; }
.checkin-nums { display: flex; flex-wrap: wrap; gap: var(--space-2); color: var(--color-text-muted); font-size: 13px; }
.checkin-nums b { color: var(--color-text); }
.checkin-cycle { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.checkin-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 12px; color: var(--color-text-muted); }
.checkin-cell.is-done { background: rgba(46, 158, 91, .08); border-color: rgba(46, 158, 91, .45); color: var(--color-success); }
.checkin-cell.is-current { border-color: var(--color-primary); color: var(--color-primary); }
.checkin-cell__pts { font-weight: 700; font-size: 13px; color: inherit; }
.checkin-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; max-width: 360px; }
.checkin-cal__wk { padding: 4px 0; color: var(--color-text-muted); font-size: 12px; text-align: center; }
.checkin-cal__day { display: flex; align-items: center; justify-content: center; height: 34px; border: 1px solid transparent; border-radius: 50%; font-size: 13px; }
.checkin-cal__day.is-checked { background: var(--color-primary); color: var(--color-text-invert); font-weight: 700; }
.checkin-cal__day.is-today { border-color: var(--color-primary); }
.checkin-cal__day.is-future { opacity: .45; }
.checkin-cal__day.is-blank { visibility: hidden; }
@media (max-width: 480px) {
  .checkin-cycle { grid-template-columns: repeat(4, 1fr); }
}