/* PC正文宽由共享主列接管，沿用现有gutter只扣一次，不保留旧1664等比上限。 */
@media (min-width:1024px){.hg-main>.main.hg-profile{max-width:none}}
/* 私有尺寸：PC按1920设计稿同比，H5沿用独立移动稿的像素值。 */
:root{--hg-profile-unit:1px;--hg-profile-text-unit:1px;--hg-profile-aux-min:0px}
@media (min-width:1024px){:root{--hg-profile-unit:var(--hg-pc-unit,calc(100vw / 1920));--hg-profile-text-unit:var(--hg-text-unit,max(.875px,var(--hg-profile-unit)));--hg-profile-aux-min:12px}}
/* 个人中心 hub（Figma 1356:16638）。卡底 / 退出条 / 图标用切图，不手画。
   左右 gutter 与顶栏 .hg-header__inner 同源（--hg-page-gutter）；
   PC内容区跟随共享主列，对齐稿上三卡 538×3 + 间距 25×2。 */
.hg-profile{
  box-sizing:border-box;
  max-width:calc(calc(1664 * var(--hg-profile-unit)) + 2 * var(--hg-page-gutter));
  margin:0 auto;
  padding:calc(20 * var(--hg-profile-unit)) var(--hg-page-gutter) calc(48 * var(--hg-profile-unit))
}
.hg-profile-hero{
  position:relative;height:calc(136 * var(--hg-profile-unit));background:transparent
}
.hg-profile-hero__inner{
  display:flex;align-items:center;height:100%;
  padding:0 calc(20 * var(--hg-profile-unit))
}
.hg-profile-hero__avatar{
  flex-shrink:0;width:calc(90 * var(--hg-profile-unit));height:calc(90 * var(--hg-profile-unit));border-radius:calc(45 * var(--hg-profile-unit));overflow:hidden;
  border:calc(2 * var(--hg-profile-unit)) solid rgba(255,255,255,.5);background:#fff
}
.hg-profile-hero__avatar img{display:block;width:100%;height:100%;object-fit:cover}
/* 色块头像与上一行 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:max(14px,calc(36 * var(--hg-profile-text-unit)))}
.hg-profile-hero__meta{min-width:0;margin-left:calc(20 * var(--hg-profile-unit))}
.hg-profile-hero__meta h1{
  margin:0;color:#fff;font-size:max(14px,calc(30 * var(--hg-profile-text-unit)));font-weight:600;line-height:calc(45 * var(--hg-profile-text-unit));
  letter-spacing:calc(-.2 * var(--hg-profile-unit));overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.hg-profile-hero__meta p{
  margin:0;color:rgba(255,255,255,.65);font-size:max(14px,calc(14 * var(--hg-profile-text-unit)));line-height:calc(22 * var(--hg-profile-text-unit));letter-spacing:calc(-.08 * var(--hg-profile-unit))
}
.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:calc(36 * var(--hg-profile-unit));padding:calc(8 * var(--hg-profile-unit)) calc(30 * var(--hg-profile-unit));
  border:calc(1 * var(--hg-profile-unit)) solid rgba(255,255,255,.2);border-radius:calc(999 * var(--hg-profile-unit));background:rgba(0,0,0,.5);
  color:#fff;font-size:max(14px,calc(14 * var(--hg-profile-text-unit)));font-weight:500;line-height:calc(20 * var(--hg-profile-text-unit));text-decoration:none;cursor:pointer
}
.hg-profile-entries{margin-top:calc(30 * var(--hg-profile-unit))}
.hg-profile-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(20 * var(--hg-profile-unit)) calc(25 * var(--hg-profile-unit));margin-top:calc(20 * var(--hg-profile-unit))
}
.hg-profile-card{
  position:relative;display:flex;align-items:center;min-height:calc(90 * var(--hg-profile-unit));padding:calc(21 * var(--hg-profile-unit)) calc(20 * var(--hg-profile-unit));
  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:calc(48 * var(--hg-profile-unit));height:calc(48 * var(--hg-profile-unit));border-radius:calc(999 * var(--hg-profile-unit));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:calc(20 * var(--hg-profile-unit));margin-right:calc(12 * var(--hg-profile-unit))
}
.hg-profile-card__title{color:#ffd21c;font-size:max(14px,calc(16 * var(--hg-profile-text-unit)));font-weight:500;line-height:1.22}
.hg-profile-card__desc{
  margin-top:calc(6 * var(--hg-profile-unit));color:#fff;font-size:max(14px,calc(16 * var(--hg-profile-text-unit)));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:calc(32 * var(--hg-profile-unit));height:calc(32 * var(--hg-profile-unit));padding:calc(6 * var(--hg-profile-unit));border-radius:calc(999 * var(--hg-profile-unit));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:calc(64 * var(--hg-profile-unit));margin:calc(40 * var(--hg-profile-unit)) 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:max(14px,calc(20 * var(--hg-profile-text-unit)));font-weight:500;line-height:1.22
}
@media (max-width:1023px){
  .hg-profile{padding:calc(16 * var(--hg-profile-unit)) var(--hg-page-gutter) calc(32 * var(--hg-profile-unit))}
  .hg-profile-hero{height:auto}
  .hg-profile-hero__inner{
    flex-wrap:wrap;align-items:center;padding:calc(16 * var(--hg-profile-unit)) calc(14 * var(--hg-profile-unit)) calc(14 * var(--hg-profile-unit))
  }
  .hg-profile-hero__avatar{width:calc(56 * var(--hg-profile-unit));height:calc(56 * var(--hg-profile-unit));border-radius:calc(28 * var(--hg-profile-unit))}
  /* 容器缩到 56 时字号跟着缩（56×0.42≈24），否则 36px 的字在 56px 圆里塞不下。 */
  .hg-profile-hero__avatar .hg-avatar{font-size:max(14px,calc(24 * var(--hg-profile-text-unit)))}
  .hg-profile-hero__meta{margin-left:calc(12 * var(--hg-profile-unit));flex:1;min-width:0}
  .hg-profile-hero__meta h1{font-size:max(14px,calc(20 * var(--hg-profile-text-unit)));line-height:calc(28 * var(--hg-profile-text-unit))}
  .hg-profile-hero__settings{
    width:100%;margin:calc(14 * var(--hg-profile-unit)) 0 0;height:calc(36 * var(--hg-profile-unit));padding:0;
    color:#8e8e93;font-size:max(14px,calc(14 * var(--hg-profile-text-unit)))
  }
  .hg-profile-entries{margin-top:calc(20 * var(--hg-profile-unit))}
  .hg-profile-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(12 * var(--hg-profile-unit)) calc(10 * var(--hg-profile-unit))}
  .hg-profile-card{min-height:calc(64 * var(--hg-profile-unit));padding:calc(12 * var(--hg-profile-unit)) calc(10 * var(--hg-profile-unit))}
  .hg-profile-card__icon{width:calc(30 * var(--hg-profile-unit));height:calc(30 * var(--hg-profile-unit))}
  .hg-profile-card__icon img{width:calc(15 * var(--hg-profile-unit));height:calc(15 * var(--hg-profile-unit))}
  .hg-profile-card__text{margin-left:calc(8 * var(--hg-profile-unit));margin-right:calc(4 * var(--hg-profile-unit))}
  .hg-profile-card__title{color:#fff;opacity:.7;font-size:max(14px,calc(15 * var(--hg-profile-text-unit)))}
  .hg-profile-card__desc{display:none}
  .hg-profile-card__chevron{width:calc(26 * var(--hg-profile-unit));height:calc(26 * var(--hg-profile-unit));padding:calc(5 * var(--hg-profile-unit))}
  .hg-profile-logout{height:calc(44 * var(--hg-profile-unit));margin-top:calc(20 * var(--hg-profile-unit))}
  .hg-profile-logout span{font-size:max(14px,calc(15 * var(--hg-profile-text-unit)))}
}

@media (min-width:1024px){
  .hg-profile-card__icon img[width="24"]{width:calc(24 * var(--hg-profile-unit));height:calc(24 * var(--hg-profile-unit))}
  .hg-profile-card__icon img[width="20"]{width:calc(20 * var(--hg-profile-unit));height:calc(20 * var(--hg-profile-unit))}
}
@media (min-width:1024px){
  .hg-profile-hero__settings,.hg-profile-logout{min-height:36px}
  .hg-profile-card__title,.hg-profile-card__desc{line-height:1.4}
}