/* UserInfo demo - 旧版风格增强，作用域限定在 .uinfo-page 以免影响全站 */

/* Modern 页面字体：覆盖 xqx.css 的 SimSun，统一中文无衬线体系 */
body {
  font-family: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei",
               "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Source Han Sans SC",
               "WenQuanYi Micro Hei", Roboto, Arial, Helvetica,
               "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
button, input, select, textarea { font: inherit; }

/* 页内左右留白：为所有卡片与题头提供一致的左右间距 */
.uinfo-page {
  padding: 0 12px;
  /* 该页专用的主题色变量（仅作用于 .uinfo-page 作用域内） */
  --c-primary: #0D9488;      /* 主色 teal-600 */
  --c-primary-700: #0F766E;  /* 深一阶：hover/文字 */
  --c-primary-50: #ECFDF5;   /* 极浅底色 */
  --c-primary-100: #D1FAF5;  /* 浅底/分隔 */
  --c-danger: #DC2626;       /* 危险操作 */
  --c-danger-50: #FEF2F2;    /* 危险浅底 */
  --c-success: #16A34A;      /* 成功/在线状态 */
  --c-text: #111827;         /* 主体文字 */
  --c-text-2: #475569;       /* 次级文字 */
  --c-label: #64748B;        /* 标签/说明 */
  --c-muted: #94A3B8;        /* 弱化信息 */
  --c-surface: #FFFFFF;      /* 卡片背景 */
  --c-surface-alt: #F8FAFC;  /* 次级背景 */
  --c-border: #E5E7EB;       /* 边框 */
}

/* 顶部标题：继承站点默认题头背景与样式（与旧版一致） */
.uinfo-page .title {
  padding: 8px 10px;
  border-radius: 12px 12px 0 0;
  position: relative;
  border-bottom: none;
}

/* 标题链接：保持原有样式，鼠标手型 */
.uinfo-page .title a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.uinfo-page .title a:hover {
  color: inherit;
  text-decoration: none;
}

/* 卡片容器：覆盖 xqx.css 的 .content 视觉，但不影响其他页面 */
.uinfo-page .uinfo-card.content {
  background: var(--c-surface);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  margin-bottom: 12px;
  transition: box-shadow .2s ease;
  padding: 12px;      /* 增加卡片内边距，避免内容拥挤 */
}
/* 仅对可交互卡片增强悬停阴影（避免误导不可点击的容器） */
.uinfo-page .uinfo-card.content.is-hoverable:hover { box-shadow: 0 4px 12px rgba(0,0,0,.12); }

/* 资料区 */
.uinfo-page .uinfo-profile { display: flex; align-items: center; gap: 14px; }
.uinfo-page .uinfo-avatar { width: 120px; height: 120px; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.12); flex: 0 0 auto; }

/* 头像双层结构：基础样式（桌面端默认：120px 正方形） */
.uinfo-page .uinfo-avatar-container {
  position: relative;
  width: 100%;
  height: 100%;
  background: #f3f4f6;
}

.uinfo-page .uinfo-avatar-fallback {
  position: absolute;
  inset: 0;
  font-family: 'Inter', 'Noto Sans SC', system-ui, sans-serif;
  font-size: 68px;
  font-weight: 500;
  color: rgba(88, 180, 176, 0.7);
  text-align: center;
  line-height: 120px; /* 等于桌面端头像高度，实现垂直居中 */
  user-select: none;
}

.uinfo-page .uinfo-avatar .uinfo-avatar-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* 可点击头像：轻微缩放反馈（预览脚本会在 .uinfo-avatar 上添加 .is-clickable） */
.uinfo-page .uinfo-avatar.is-clickable {
  transition: transform .18s ease;
  will-change: transform;
}
.uinfo-page .uinfo-avatar.is-clickable::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.10);
  border-radius: inherit;
  opacity: 0;
  transition: opacity .18s ease;
}
.uinfo-page .uinfo-avatar.is-clickable:hover {
  transform: scale(0.96);
}
.uinfo-page .uinfo-avatar.is-clickable:hover::after {
  opacity: 1;
}

/* 加载成功：隐藏 fallback */
.uinfo-page .uinfo-avatar-container.is-loaded .uinfo-avatar-fallback {
  display: none;
}

/* 加载失败：隐藏图片 */
.uinfo-page .uinfo-avatar-container.is-error .uinfo-avatar-img {
  display: none;
}

.uinfo-page .uinfo-basic { flex: 1 1 auto; min-width: 0; }
.uinfo-page .uinfo-meta { display: flex; align-items: center; gap: 8px; color: var(--c-text-2); font-size: 14px; }
/* 个人资料卡：移除容器级 line-height，改为文本元素单独设置 */
.uinfo-page .uinfo-profile-card .uinfo-meta { margin-top: 5px; margin-bottom: 7px; line-height: 1.4; }
.uinfo-page .uinfo-online-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c-success); margin-right: 4px; position: relative; top: -1px; }
.uinfo-page .uinfo-online-dot--offline { background: #9ca3af; }

/* 基本信息头 - Grid 两行布局：昵称与ID同列，按钮跨两行 */
.uinfo-page .uinfo-basic-head {
  line-height: 1.3;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 3px;
  align-items: center;
}
.uinfo-page .uinfo-nickname {
  grid-column: 1;
  grid-row: 1;
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  max-width: 100%; /* 桌面端：允许自然换行，不强制截断 */
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.uinfo-page .uinfo-nickname img {
  vertical-align: -0.05em;
  margin-right: -0.3em;
}
.uinfo-page .uinfo-idline { grid-column: 1; grid-row: 2; font-size: 13px; color: var(--c-label); margin: 0; }

/* 发送私信：基类（位置与排列） */
.uinfo-page .uinfo-pm-link {
  grid-column: 2; grid-row: 1; justify-self: end; align-self: start;
  display: inline-flex; align-items: center; gap: 6px;
  line-height: 1; white-space: nowrap; text-decoration: none;
}

/* 方案 1：链接样式（保留，便于回退） */
.uinfo-page .uinfo-pm-link--link { color: var(--c-primary-700); padding: 2px 6px; border-radius: 6px; transition: background-color .15s ease, color .15s ease; }
.uinfo-page .uinfo-pm-link--link:hover { background: var(--c-primary-50); text-decoration: none; }
.uinfo-page .uinfo-pm-link--link:focus { outline: 2px solid rgba(13,148,136,.35); outline-offset: 1px; }
.uinfo-page .uinfo-pm-link--link svg { width: 14px; height: 14px; fill: currentColor; opacity: .9; display: block; }

/* 方案 2：Chip 胶囊样式（当前启用，显眼但仍轻） */
.uinfo-page .uinfo-pm-link--chip { color: var(--c-primary-700); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 9999px; padding: 4px 9px; font-weight: 600; font-size: 14px; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.uinfo-page .uinfo-pm-link--chip:hover { background: var(--c-primary-50); border-color: rgba(13,148,136,.28); }
.uinfo-page .uinfo-pm-link--chip:focus { outline: 2px solid rgba(13,148,136,.30); outline-offset: 1px; }
.uinfo-page .uinfo-pm-link--chip svg { width: 1.15em; height: 1.15em; fill: currentColor; opacity: .95; display: block; }

/* 个性签名：头像信息之后，统计之前 */
.uinfo-page .qianming { display: flex; align-items: flex-start; gap: 8px; background: linear-gradient(135deg, #f8f9fa 0%, #eef3f1 100%); padding: 10px 12px; margin: 14px 0 12px 0; color: #555; font-style: italic; border-radius: 4px; }
.uinfo-page .qianming i { color: #1abc9c; opacity: 0.6; font-size: 14px; flex-shrink: 0; margin-top: 2px; }
.uinfo-page .qianming span { flex: 1; text-align: center; line-height: 1.5; }

/* 行为按钮组：替代旧 .bt2 分段按钮，更贴近新版主题 */
.uinfo-page .uinfo-btn-group { display: grid; gap: 8px; }
.uinfo-page .uinfo-btn-group.uinfo-btn-group--equal { grid-template-columns: 1fr 1fr; }


/* 按钮体系（用于卡片下方两个主操作及页尾导航） */
.uinfo-page .u-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 14px;
  text-decoration: none; cursor: pointer; user-select: none;
  border: 1px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease;
  border-radius: 10px;
  font-weight: 600;
}

.uinfo-page .u-btn i { margin-right: 6px; }

/* 细节 CTA（查看详细资料 / 查看更多留言）：默认无边框，hover 全宽浅底 */
.uinfo-page .u-btn--quiet-cta {
  border-color: transparent; background: transparent;     color: rgb(17 130 107 / 82%);
  justify-content: center; text-align: center;
  display: flex; width: 100%; flex: 1 1 100%;
}
.uinfo-page .u-btn--quiet-cta:hover { border-color: rgba(13,148,136,.20); background: #ecfdf554; color: var(--c-primary-700); }
.uinfo-page .u-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(13,148,136,.18); }
.uinfo-page .u-btn:active { transform: translateY(1px); }
/* 留言按钮激活态：取消位移，仅调整阴影 */
.uinfo-page .uinfo-gb-form .u-btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(26,188,156,.28); }

/* （撤回）软主按钮：如需再次启用，可还原此段 */

.uinfo-page .u-btn--primary {
  background: #fff;
  color: var(--c-primary-700);
  border-color: var(--c-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.uinfo-page .u-btn--primary:hover {
  background: var(--c-primary-50);
  border-color: var(--c-primary-700);
  box-shadow: 0 2px 6px rgba(13,148,136,.15);
}

.uinfo-page .u-btn--gradient {
  background-image: linear-gradient(#f4f4f4, #ececec);
  border: 1px solid #dfdfdf;
  box-shadow: none;
  letter-spacing: .03em;
  font-weight: 500;
  font-size: 13px;
  color: #595959;
  height: 35px;
}
.uinfo-page .u-btn--gradient:hover {
  border: 1px solid var(--c-primary);
  border-bottom-color: var(--c-primary-700);
  background-color: var(--c-primary);
  background-image: linear-gradient(var(--c-primary), var(--c-primary-700));
  color: #fff;
  text-shadow: none;
}
.uinfo-page .u-btn--danger-outline { background: #fff; color: #B91C1C; border-color: #DC2626; }
.uinfo-page .u-btn--danger-outline:hover { background: var(--c-danger-50); border-color: #B91C1C; color: #B91C1C; }
.uinfo-page .u-btn--outline { background: #fff; color: var(--c-primary-700); border-color: rgba(13,148,136,.25); }
.uinfo-page .u-btn--outline:hover { background: var(--c-primary-50); border-color: rgba(13,148,136,.40); color: var(--c-primary-700); }

/* 禁用按钮：灰色不可点击状态 */
.uinfo-page .u-btn--disabled { opacity: 0.5; cursor: not-allowed; }
/* 冻结禁用态的悬停/激活，避免视觉误导；保留原配色，仅弱化边框 */
.uinfo-page .u-btn--primary.u-btn--disabled,
.uinfo-page .u-btn--primary.u-btn--disabled:hover,
.uinfo-page .u-btn--primary.u-btn--disabled:active {
  background: #fff;
  color: var(--c-primary-700);
  border-color: rgba(13,148,136,.35);
  box-shadow: none;
  transform: none;
  filter: none;
}
.uinfo-page .u-btn--danger-outline.u-btn--disabled,
.uinfo-page .u-btn--danger-outline.u-btn--disabled:hover,
.uinfo-page .u-btn--danger-outline.u-btn--disabled:active {
  background: #fff;
  color: #B91C1C;
  border-color: rgba(185,28,28,.45);
  box-shadow: none;
  transform: none;
  filter: none;
}

/* 发送留言按钮：圆角更小 */
.uinfo-page .uinfo-gb-form .u-btn { border-radius: 6px; }

/* 统计区 */
.uinfo-page .uinfo-stats { padding-top: 12px; }
.uinfo-page .uinfo-stats-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; }
.uinfo-page .uinfo-stats-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

/* 通用卡片样式 */
.uinfo-page .uinfo-stat { border: 1px solid transparent; border-radius: 12px; padding: 14px; text-decoration: none; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 1px 6px rgba(0,0,0,.06); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .2s ease; }
.uinfo-page .uinfo-stat-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.uinfo-page .uinfo-stat .uinfo-text { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* 保持上方两卡片为左右布局 */
.uinfo-page .uinfo-stat.posts .uinfo-stat-inner,
.uinfo-page .uinfo-stat.replies .uinfo-stat-inner { flex-direction: row; align-items: center; justify-content: space-between; }
.uinfo-page .uinfo-stat.posts .uinfo-text,
.uinfo-page .uinfo-stat.replies .uinfo-text { align-items: flex-start; text-align: left; line-height: 1.2; gap: 2px; }
.uinfo-page .uinfo-stat .label { font-size: 13px; color: var(--c-label); }
.uinfo-page .uinfo-stat .value { font-size: 22px; font-weight: 700; line-height: 1.1; color: var(--c-text); }

/* 统一标题与首卡整体阴影：父容器一次性投影 */
.uinfo-page .uinfo-hero {
  position: relative;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08); /* 与其他卡片一致 */
  margin-bottom: 12px; /* 保持与其他卡片间距节奏 */
}
.uinfo-page .uinfo-hero .title { margin-bottom: 0; box-shadow: none; }
.uinfo-page .uinfo-hero .uinfo-profile-card { border-radius: 0 0 12px 12px; margin-bottom: 0; box-shadow: none; }
.uinfo-page .uinfo-stat .icon i { font-size: 22px; opacity: .9; }
.uinfo-page .uinfo-stat:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.08); }


/* 变体：上排功能卡（帖子/回复）- 极简中性+青绿色点缀 */
.uinfo-page .uinfo-stat.posts,
.uinfo-page .uinfo-stat.replies {
  background: #f9fafb;
  border-color: #f3f4f6;
  padding: 18px 14px;
}
/* 帖子/回复卡片：青绿色点缀与排版一致 */
.uinfo-page .uinfo-stat.posts:hover,
.uinfo-page .uinfo-stat.replies:hover {
  border-color: rgba(13, 148, 136, 0.3);
  background-color: rgba(13, 148, 136, 0.05);
}
.uinfo-page .uinfo-stat.posts .label,
.uinfo-page .uinfo-stat.replies .label { color: #6b7280; line-height: 1.3; }
.uinfo-page .uinfo-stat.posts .value,
.uinfo-page .uinfo-stat.replies .value { color: var(--c-primary-700); font-size: 24px;  }
.uinfo-page .uinfo-stat.posts .icon,
.uinfo-page .uinfo-stat.replies .icon {
  color: var(--c-primary-700);
  opacity: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* （移除未使用的人气卡变体样式） */

/* 变体：下排数据卡（妖晶/等级/注册） */
.uinfo-page .uinfo-stat.money,
.uinfo-page .uinfo-stat.level,
.uinfo-page .uinfo-stat.reg {
  background: linear-gradient(180deg, #fafafa, #ffffff);
  border-color: rgba(0,0,0,.06);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.uinfo-page .uinfo-stat.money:hover,
.uinfo-page .uinfo-stat.level:hover,
.uinfo-page .uinfo-stat.reg:hover {
  border-color: rgba(16,185,129,.15);
}
.uinfo-page .uinfo-stat.money .label,
.uinfo-page .uinfo-stat.level .label,
.uinfo-page .uinfo-stat.reg .label {
  color: var(--c-muted);
  font-size: 12px;
  line-height: 1.2;
}
.uinfo-page .uinfo-stat.money .value,
.uinfo-page .uinfo-stat.level .value,
.uinfo-page .uinfo-stat.reg .value {
  color: var(--c-text-2);   /* 次级文字色，弱化强调 */
  font-size: 22px;          /* 与上排一致或略小 */
  font-weight: 600;         /* 比原来的 800 更轻 */
}
.uinfo-page .uinfo-stat.money .uinfo-stat-inner,
.uinfo-page .uinfo-stat.level .uinfo-stat-inner,
.uinfo-page .uinfo-stat.reg .uinfo-stat-inner {
  height: auto;
  display: block;
}
.uinfo-page .uinfo-stat.money .uinfo-text,
.uinfo-page .uinfo-stat.level .uinfo-text,
.uinfo-page .uinfo-stat.reg .uinfo-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* 当统计在资料卡中时，增加内部分隔线与更紧凑的上边距 */
.uinfo-page .uinfo-profile-card .uinfo-stats { margin-top: 14px; border-top: 1px solid #eef2f2; }

/* 人气统计区域 */
.uinfo-page .uinfo-popularity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding-bottom: 5px;
  margin-top: -1px;
}

/* 人气统计卡片：复用下排数据卡样式（妖晶/等级/注册） */
.uinfo-page .uinfo-stat.space-popularity,
.uinfo-page .uinfo-stat.today-popularity {
  background: linear-gradient(180deg, #fafafa, #ffffff);
  border-color: rgba(0,0,0,.06);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.uinfo-page .uinfo-stat.space-popularity:hover,
.uinfo-page .uinfo-stat.today-popularity:hover {
  border-color: rgba(16,185,129,.15);
}

/* 人气卡片内部结构 */
.uinfo-page .uinfo-stat.space-popularity .uinfo-stat-inner,
.uinfo-page .uinfo-stat.today-popularity .uinfo-stat-inner {
  height: auto;
  display: block;
}

.uinfo-page .uinfo-stat.space-popularity .uinfo-text,
.uinfo-page .uinfo-stat.today-popularity .uinfo-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* 人气卡片文字样式 */
.uinfo-page .uinfo-stat.space-popularity .label,
.uinfo-page .uinfo-stat.today-popularity .label {
  color: var(--c-muted);
  font-size: 12px;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.uinfo-page .uinfo-stat.space-popularity .value,
.uinfo-page .uinfo-stat.today-popularity .value {
  color: var(--c-text-2);
  font-size: 22px;
  font-weight: 600;
}

/* 人气图标颜色 */
.uinfo-page .uinfo-stat.space-popularity .label i {
  color: #f97316; /* 橙色火焰 */
  font-size: 13px;
}

.uinfo-page .uinfo-stat.today-popularity .label i {
  color: var(--c-primary); /* 青绿色日历 */
  font-size: 13px;
}

/* CTA 容器：单独一行，内容居中 */
.uinfo-page .uinfo-cta { display: flex; justify-content: center; margin-top: 10px; }

/* 勋章 */
.uinfo-page .uinfo-section-title { font-weight: 700; color: var(--c-text); margin-bottom: 6px; }
.uinfo-page .uinfo-badge-wall { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; padding-bottom: 5px;margin-top: -1px;}

/* 最新动态：列表与列表项（统一使用 margin-bottom） */
.uinfo-page .uinfo-dyn-item {
  display: flex; align-items: center;
  border-radius: 8px; border: 1px solid #f0f0f0;
  margin-bottom: 6px; padding: 10px 12px;
  background: #fefefe;
  line-height: 1.5;
}
.uinfo-page .uinfo-dyn-list .uinfo-dyn-item:last-child { margin-bottom: 0; }
.uinfo-page .uinfo-dyn-item .uinfo-dyn-text { flex: 1 1 auto; min-width: 0; }
.uinfo-page .uinfo-dyn-content { color: var(--c-text); margin: 0; line-height: 1.5; font-size: 16px; }
.uinfo-page .uinfo-dyn-content a { font-size: 16px; }
.uinfo-page .uinfo-dyn-meta { color: var(--c-muted); font-size: 12px; }
.uinfo-page .uinfo-dyn-meta.gb-time { cursor: pointer; }

/* 留言区：表单与列表 */
.uinfo-page .uinfo-gb-form { display: flex; flex-direction: column; gap: 5px; align-items: stretch; margin-bottom: 14px; width: 100%; max-width: 100%; }
.uinfo-page .uinfo-gb-form .txt {
  flex: 1 1 auto; min-height: auto; resize: vertical; width: 100%; max-width: 100%; box-sizing: border-box; display: block;
  padding: 8px; border: 1px solid var(--c-border); border-radius: 8px;
  color: var(--c-text); line-height: 1.5; font-size: 16px;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.uinfo-page .uinfo-gb-form .txt::placeholder { color: var(--c-muted); }
.uinfo-page .uinfo-gb-form .txt:focus,
.uinfo-page .uinfo-gb-form .txt:focus-visible {
  outline: none; background: #fff; border-color: var(--c-primary);
  box-shadow: 0 0 0 2px rgba(13,148,136,.18);
}
.uinfo-page .uinfo-gb-actions { display: flex; justify-content: flex-start; }

/* 留言列表项：统一使用 margin-bottom，最后一项清除 */
.uinfo-page .uinfo-gb-item { border-radius: 8px; border: 1px solid #f0f0f0; margin-bottom: 6px; padding: 10px 12px; background: #fefefe; position: relative; }
/* 列表最后一项去掉额外下边距，统一 CTA 的上方留白 */
.uinfo-page .uinfo-gb-list .uinfo-gb-item:last-child { margin-bottom: 0; }
/* 留言作者与内容样式 */
.uinfo-page .uinfo-gb-author { font-weight: 700; color: var(--c-text); margin-bottom: 2px; }
.uinfo-page .uinfo-gb-author a:hover { text-decoration: underline; }
.uinfo-page .uinfo-gb-content { color: var(--c-text); line-height: 1.5; }

/* 标签对齐与冒号强调：仅限本页 */
.uinfo-page .content > b { display: inline-block; min-width: 5em; color: var(--c-text); }

/* 底部返回条：按钮组形式，贴近新版 */
.uinfo-page .uinfo-footer { padding: 4px 0 12px; }

/* Tooltip 样式（模仿新版UI） */
.uinfo-page .uinfo-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(31, 41, 55, 0.95);
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  transition: opacity 0.15s ease;
}

/* Tooltip 左对齐（妖晶卡片） */
.uinfo-page .uinfo-tooltip--left {
  left: 0;
  transform: translateX(0);
}

/* Tooltip 右对齐（注册时长卡片） */
.uinfo-page .uinfo-tooltip--right {
  left: auto;
  right: 0;
  transform: translateX(0);
}

/* Tailwind 风格的显示/隐藏类 */
.uinfo-page .opacity-0 {
  opacity: 0;
}

.uinfo-page .opacity-100 {
  opacity: 1;
}

.uinfo-page .pointer-events-none {
  pointer-events: none;
}

.uinfo-page .pointer-events-auto {
  pointer-events: auto;
}

/* Tooltip 箭头 */
.uinfo-page .uinfo-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(31, 41, 55, 0.95);
}

/* 左对齐箭头 */
.uinfo-page .uinfo-tooltip--left::after {
  left: 16px;
  transform: translateX(0);
}

/* 右对齐箭头 */
.uinfo-page .uinfo-tooltip--right::after {
  left: auto;
  right: 16px;
  transform: translateX(0);
}

/* 留言板时间 tooltip：调整位置，距离时间文字更近 */
.uinfo-page .gb-time-tooltip.uinfo-tooltip--right {
  bottom: calc(100% - 10px);  /* 向下移动，距离时间文字更近 */
}

/* ========================================
   移动端响应式优化 (≤480px)
   主要变化：
   - 资料区改为垂直布局（头像上方居中）
   - 头像支持自适应宽高（自定义头像显示完整）
   - 卡片内边距缩小（12px → 8px）
   - 统计卡片间距缩小（14px → 8px）
   - Tooltip 字号缩小
   ======================================== */
@media (max-width: 480px) {
  /* 资料区：改为垂直布局，头像上方居中 */
  .uinfo-page .uinfo-profile {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  /* 头像：移到上方居中（不固定正方形，支持自适应宽高，限制最大尺寸） */
  .uinfo-page .uinfo-avatar {
    width: auto;
    height: auto;
    border-radius: 12px;
    margin-bottom: 12px; /* 使用 margin 代替 gap，加载失败时隐藏整个容器也不会留白 */
  }

  /* 图片：在流中显示，撑开容器（覆盖桌面端的 absolute 定位） */
  .uinfo-page .uinfo-avatar .uinfo-avatar-img {
    position: static;
    display: block;
    width: auto;
    height: auto;
    max-width: min(100%, 450px); /* 自定义头像最大宽度 450px */
    max-height: 280px;           /* 自定义头像最大高度 280px */
    object-fit: contain;
    z-index: auto;
  }

  /* 系统默认头像：限制为 120px 高度，保持小巧 */
  .uinfo-page .uinfo-avatar .uinfo-avatar-img[src*="/bbs/head/"] {
    max-height: 120px;
  }

  /* fallback：移动端调整为 100px 正方形 */
  .uinfo-page .uinfo-avatar-fallback {
    width: 100px;
    height: 100px;
    font-size: 40px;
    line-height: 100px; /* 覆盖桌面端的 120px，实现移动端垂直居中 */
    background: #f3f4f6;
  }

  /* 加载失败：移动端直接隐藏整个头像容器，节约空间 */
  .uinfo-page .uinfo-avatar.is-error {
    display: none;
  }

  /* 展开状态：移除高度限制，显示完整图片 */
  .uinfo-page .uinfo-avatar.is-expanded .uinfo-avatar-img {
    max-height: none;
  }

  /* 高图可点击提示：添加微妙的视觉反馈 */
  .uinfo-page .uinfo-avatar.is-tall-clickable {
    cursor: pointer;
    transition: opacity 0.2s ease;
  }
  .uinfo-page .uinfo-avatar.is-tall-clickable:active {
    opacity: 0.9;
  }

  /* 信息区：宽度充分利用 */
  .uinfo-page .uinfo-basic {
    width: 100%;
  }

  /* 昵称字号调整 */
  .uinfo-page .uinfo-nickname { font-size: 18px; }

  /* 元信息：左对齐显示 */
  .uinfo-page .uinfo-meta {
    justify-content: flex-start;
  }

  /* 人气统计卡片间距调整 */
  .uinfo-page .uinfo-popularity-grid { gap: 8px; }

  /* 统计卡片间距调整：缩小到 8px */
  .uinfo-page .uinfo-stats-row2 { gap: 8px; }
  .uinfo-page .uinfo-stats-row3 { gap: 8px; }

  /* 卡片内边距调整：缩小到 8px */
  .uinfo-page .uinfo-card.content { padding: 8px; }
  .uinfo-page .uinfo-cta { margin-top: 8px; }

  /* 页面左右留白：缩小到 5px */
  .uinfo-page { padding: 0 5px; }

  /* Tooltip 移动端优化 */
  .uinfo-page .uinfo-tooltip {
    font-size: 12px;
    padding: 5px 10px;
  }
}

/* ========================================
   窄屏优化 (≤350px)
   主要变化：
   - 统计卡片字号缩小（22px → 20px）
   - 统计卡片内边距缩小（14px → 12px）
   ======================================== */
@media (max-width: 350px) {
  .uinfo-page .uinfo-stat.money .value,
  .uinfo-page .uinfo-stat.level .value,
  .uinfo-page .uinfo-stat.reg .value {
    font-size: 20px;
  }
  /* 所有统计卡片内边距缩小 */
  .uinfo-page .uinfo-stat.posts,
  .uinfo-page .uinfo-stat.replies,
  .uinfo-page .uinfo-stat.money,
  .uinfo-page .uinfo-stat.level,
  .uinfo-page .uinfo-stat.reg {
    padding: 12px;
  }
}
@media (max-width: 320px) {
  .uinfo-page .uinfo-basic-head {
    column-gap: 1px;
  }
}
/* ========================================
   特窄屏优化 (≤310px)
   主要变化：
   - 按钮紧凑化（高度 34px，内边距 10px）
   - 私信按钮仅显示图标（隐藏文字）
   - 间距全面紧凑化（卡片 5px，按钮组 5px）
   ======================================== */
@media (max-width: 310px) {
  /* 按钮紧凑化，防止溢出 */
  .uinfo-page .uinfo-btn-group.uinfo-btn-group--equal > .u-btn {
    height: 34px;
    padding: 0 10px;
    font-size: 13px;
    box-sizing: border-box;
  }

  /* 帖子和回复卡片值字号缩小 */
  .uinfo-page .uinfo-stat.posts .value,
  .uinfo-page .uinfo-stat.replies .value {
    font-size: 20px;
  }

  /* 私信按钮仅图标显示，保持在昵称行右侧 */
  .uinfo-page .uinfo-basic-head { column-gap: 6px; row-gap: 0; }
  .uinfo-page .uinfo-pm-link.uinfo-pm-link--chip { padding: 4px; }
  .uinfo-page .uinfo-pm-link .txt { display: none; }

  /* 间距紧凑化 */
  .uinfo-page .uinfo-card.content { padding: 5px; }
  .uinfo-page .uinfo-cta { margin-top: 5px; }
  .uinfo-page .uinfo-btn-group { gap: 5px; }
}