/* 个人中心 hub（Figma 1356:16638）。卡底 / 退出条 / 图标用切图，不手画。
   左右 gutter 与顶栏 .hg-header__inner 同源（--hg-page-gutter）；
   内容区封顶 1664，对齐稿上三卡 538×3 + 间距 25×2。 */
.hg-profile{
  box-sizing:border-box;
  max-width:calc(1664px + 2 * var(--hg-page-gutter));
  margin:0 auto;
  padding:20px var(--hg-page-gutter) 48px
}
.hg-profile-hero{
  position:relative;height:136px;background:transparent
}
.hg-profile-hero__inner{
  display:flex;align-items:center;height:100%;
  padding:0 20px
}
.hg-profile-hero__avatar{
  position:relative;flex-shrink:0;width:90px;height:90px;border-radius:45px;overflow:visible;
  border:2px solid rgba(255,255,255,.5);background:#fff
}
.hg-profile-hero__avatar img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
/* 色块头像与上一行 img 同口径：模板放的是 hg/user-avatar 的 lg 档(90px/36px)，PC 下与容器
   正好吻合，但移动端断点把容器缩到了 56px（见下面 @media），色块不跟着缩就会被
   overflow:hidden 裁掉、字也偏出可见区 —— 运营截图里 H5 个人中心那个「有紫色圆没有字」
   就是这么来的。尺寸一律交给容器决定，字号取边长的 ~0.42 倍。 */
.hg-profile-hero__avatar .hg-avatar{width:100%;height:100%;font-size:36px;border-radius:50%}
.hg-profile-hero__meta{min-width:0;margin-left:20px}
.hg-profile-hero__meta h1{
  margin:0;color:#fff;font-size:30px;font-weight:600;line-height:45px;
  letter-spacing:-.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.hg-profile-hero__meta p{
  margin:0;color:rgba(255,255,255,.65);font-size:14px;line-height:22px;letter-spacing:-.08px
}
.hg-profile-hero__settings{
  -webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;
  margin-left:auto;flex-shrink:0;box-sizing:border-box;height:36px;padding:8px 30px;
  border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(0,0,0,.5);
  color:#fff;font-size:14px;font-weight:500;line-height:20px;text-decoration:none;cursor:pointer
}
.hg-profile-entries{margin-top:30px}
.hg-profile-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 25px;margin-top:20px
}
.hg-profile-card{
  position:relative;display:flex;align-items:center;min-height:90px;padding:21px 20px;
  color:inherit;text-decoration:none
}
/* 底图切图要随盒子拉伸铺满，不能按原比例缩进去、上下留一圈空白。
   显式写 object-fit:fill（本就是默认值）不是冗余：shell.tpl 里有一条全局
   img:not([width]):not([height]){object-fit:contain}，权重 (0,2,1) 压得过单个类名，
   模板上的 width/height 属性一旦被删就会命中它，卡片和退出条又会缩成细条（Bug 44479）。
   所以这里用「类名 + 元素名」的复合选择器把权重也抬到 (0,2,1)，同权重靠加载顺序取胜——
   本文件的 <link> 排在 shell 那段内联 <style> 之后，兜底有效。 */
.hg-profile-card img.hg-profile-card__bg,
.hg-profile-logout img.hg-profile-logout__bg{-o-object-fit:fill;object-fit:fill}
.hg-profile-card__bg{
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none
}
.hg-profile-card__icon{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:999px;background:rgba(255,210,28,.1);flex-shrink:0
}
.hg-profile-card__icon img{display:block}
.hg-profile-card__text{
  position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;
  min-width:0;margin-left:20px;margin-right:12px
}
.hg-profile-card__title{color:#ffd21c;font-size:16px;font-weight:500;line-height:1.22}
.hg-profile-card__desc{
  margin-top:6px;color:#fff;font-size:16px;font-weight:500;line-height:1.22;opacity:.7;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
/* 箭头是「圆形按钮」的观感：深色圆底 + 居中的 chevron 切图。
   切图本身只有一根 20×20 的折线，圆底靠这里的 background 画；box-sizing 收进 border-box，
   padding 之后内容盒正好还是切图的 20×20，不会把折线压变形。 */
.hg-profile-card__chevron{
  position:relative;z-index:1;margin-left:auto;flex-shrink:0;box-sizing:border-box;
  width:32px;height:32px;padding:6px;border-radius:999px;background:rgba(0,0,0,.5);
  transform:rotate(-90deg)
}
.hg-profile-logout{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;height:64px;margin:40px 0 0;padding:0;border:0;background:transparent;cursor:pointer
}
.hg-profile-logout__bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hg-profile-logout span{
  position:relative;z-index:1;color:#ff4b4b;font-size:20px;font-weight:500;line-height:1.22
}
@media (max-width:1023px){
  .hg-profile{padding:16px var(--hg-page-gutter) 32px}
  .hg-profile-hero{height:auto}
  .hg-profile-hero__inner{
    flex-wrap:wrap;align-items:center;padding:16px 14px 14px
  }
  .hg-profile-hero__avatar{width:56px;height:56px;border-radius:28px}
  /* 容器缩到 56 时字号跟着缩（56×0.42≈24），否则 36px 的字在 56px 圆里塞不下。 */
  .hg-profile-hero__avatar .hg-avatar{font-size:24px}
  .hg-profile-hero__meta{margin-left:12px;flex:1;min-width:0}
  .hg-profile-hero__meta h1{font-size:20px;line-height:28px}
  .hg-profile-hero__settings{
    width:100%;margin:14px 0 0;height:36px;padding:0;
    color:#8e8e93;font-size:14px
  }
  .hg-profile-entries{margin-top:20px}
  .hg-profile-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}
  .hg-profile-card{min-height:64px;padding:12px 10px}
  .hg-profile-card__icon{width:30px;height:30px}
  .hg-profile-card__icon img{width:15px;height:15px}
  .hg-profile-card__text{margin-left:8px;margin-right:4px}
  .hg-profile-card__title{color:#fff;opacity:.7;font-size:15px}
  .hg-profile-card__desc{display:none}
  .hg-profile-card__chevron{width:26px;height:26px;padding:5px}
  .hg-profile-logout{height:44px;margin-top:20px}
  .hg-profile-logout span{font-size:15px}
}