/* 账户设置（Figma 1356:21768）。左右 gutter 与个人中心同源，内容区封顶 1664。 */
.hg-settings{
  box-sizing:border-box;
  max-width:calc(1664px + 2 * var(--hg-page-gutter));
  margin:0 auto;
  padding:20px var(--hg-page-gutter) 48px
}
.hg-settings__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  margin-top:14px
}
.hg-settings__titles h1{
  margin:0;color:#fff;font-size:26px;font-weight:600;line-height:39px;letter-spacing:-.04px
}
.hg-settings__titles p{
  margin:3px 0 0;color:rgba(255,255,255,.6);font-size:14px;line-height:20px
}
.hg-settings__card{
  display:flex;align-items:center;gap:20px;
  box-sizing:border-box;min-height:90px;margin-top:20px;padding:17px 25px;
  border:1px solid rgba(255,255,255,.06);border-radius:14px;background:#161616
}
.hg-settings__head + .hg-settings__card{margin-top:30px}
.hg-settings__card[hidden]{display:none!important}
.hg-settings__card--edit{
  display:block;min-height:110px;padding:20px 36px 20px 23px;
  border-color:rgba(255,255,255,.1);border-radius:16px
}
.hg-settings__left{
  display:flex;align-items:center;gap:48px;min-width:0;flex:1
}
.hg-settings__label{
  flex-shrink:0;width:56px;color:rgba(255,255,255,.65);font-size:14px;line-height:21px;
  letter-spacing:-.15px;text-align:left
}
.hg-settings__avatar{
  flex-shrink:0;width:50px;height:50px;border-radius:25px;overflow:hidden;background:#fff
}
.hg-settings__avatar img{display:block;width:100%;height:100%;object-fit:cover}
/* TG 风格色块头像（hg/user-avatar 的 .hg-avatar）撑满 50px 的外框：
   子模板的 --md 档是 56px，不压尺寸会被外框的 overflow:hidden 裁掉一圈。 */
.hg-settings__avatar .hg-avatar{width:100%;height:100%;font-size:20px}
.hg-settings__name{
  min-width:0;color:#fff;font-size:18px;font-weight:600;line-height:24px;letter-spacing:-.3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.hg-settings__nick-row{display:flex;align-items:center;width:100%}
.hg-settings__nick-row .hg-settings__label{margin-right:48px}
.hg-settings__input{
  box-sizing:border-box;flex:1;min-width:0;height:44px;padding:0 14px;border:1px solid #ffd21c;
  border-radius:6px;background:#1a1a1b;color:#fff;font-size:15px;font-weight:500;outline:none
}
.hg-settings__hint{margin:8px 240px 0 104px;color:#5c5c5e;font-size:12px;line-height:17px}
.hg-settings__actions{display:flex;align-items:center;gap:20px;flex-shrink:0;margin-left:20px}
.hg-settings__ghost,.hg-settings__save{
  -webkit-appearance:none;appearance:none;box-sizing:border-box;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  width:100px;height:46px;padding:0;border-radius:999px;font-size:13px;font-weight:500;
  line-height:19.5px;letter-spacing:-.08px;white-space:nowrap;cursor:pointer
}
.hg-settings__card--edit .hg-settings__ghost,.hg-settings__save{font-size:14px}
button.hg-settings__ghost{
  border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.5);background-color:rgba(0,0,0,.5);background-image:none;
  color:rgba(255,255,255,.8)
}
/* 压过 common.css 的 button:not(.hg-btn){background-color:unset}，否则黄底被卸掉。 */
button.hg-settings__save{
  border:0;background:#ffd21c;background-color:#ffd21c;background-image:none;color:#000
}
button.hg-settings__ghost:disabled,button.hg-settings__save:disabled{opacity:.55;cursor:default}
/* 提示条钉在视口正中，不再贴底（44755）：昵称编辑区在页面靠上位置，
   原先 bottom:32px 让「昵称不能为空」出现在视口最下沿，离用户视线焦点太远，
   测试当时直接没看见、按「保存无提示」报的单。改成正中后与操作区同屏可见。 */
.hg-settings__toast{
  position:fixed;left:50%;top:50%;z-index:80;transform:translate(-50%,-50%);
  max-width:min(420px,calc(100vw - 32px));padding:10px 16px;border-radius:8px;
  background:rgba(0,0,0,.82);color:#fff;font-size:13px;line-height:18px;pointer-events:none
}
.hg-avatar-pick{
  position:fixed;inset:0;z-index:12020;display:flex;align-items:center;justify-content:center;
  padding:16px;box-sizing:border-box
}
.hg-avatar-pick[hidden]{display:none!important}
.hg-avatar-pick__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72)}
/* max-height + 自身滚动是给矮屏兜底：色板 20 色在窄屏是 4 列五行（~420px），
   加上标题/预览/按钮，iPhone SE 那档 667 高会顶出视口、确认键点不到。
   dvh 覆盖移动端地址栏收放；不支持 dvh 的浏览器落回上一条 vh。 */
.hg-avatar-pick__box{
  position:relative;z-index:1;box-sizing:border-box;width:480px;max-width:100%;
  max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;
  padding:32px;border:1px solid rgba(255,255,255,.1);border-radius:24px;background:#111;
  box-shadow:0 24px 24px rgba(0,0,0,.5)
}
.hg-avatar-pick__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.hg-avatar-pick__head h2{margin:0;color:#fff;font-size:32px;font-weight:600;line-height:1.4}
.hg-avatar-pick__head p{margin:6px 0 0;color:#8e8e93;font-size:14px;line-height:1.4}
.hg-avatar-pick__x{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:40px;height:40px;padding:0;border:0;border-radius:8px;
  background:rgba(255,255,255,.05);cursor:pointer
}
.hg-avatar-pick__x img{display:block;width:28px;height:28px}
/* 预览：所选背景色 + 昵称首字符，实时跟着色块走。
   .hg-avatar 来自 hg/user-avatar 子模板（样式在 shell.tpl 的 hg/user-avatar-style），
   这里只压尺寸——单类 (0,1,0) 被下面的 (0,2,0) 稳压。 */
.hg-avatar-pick__preview{display:flex;align-items:center;gap:16px;margin-top:24px}
.hg-avatar-pick__preview-dot{display:flex;flex-shrink:0}
.hg-avatar-pick__preview .hg-avatar{width:72px;height:72px;font-size:30px}
.hg-avatar-pick__preview-tip{margin:0;color:#8e8e93;font-size:13px;line-height:19px}
/* 列数跟着色板数量走：色板 20 色，PC 排 10 列正好两行满行（8 列会剩半行 4 个，
   左对齐地吊在下面）。弹窗内容区 480-2*32=416px，10 列 + 9 道 10px 间距，
   每格 32.6px —— 所以下面 swatch 的 min-height 必须小于它，否则 aspect-ratio
   被顶掉、圆点又会压成椭圆（改造时在窄屏上踩过一次）。 */
.hg-avatar-pick__grid{
  display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:10px;margin-top:24px
}
/* 色块的背景色走**行内 style**（模板里 style="background-color:#XXXXXX"）：
   common.css 有 button:not(.hg-btn){background-color:unset}，特异度 (0,1,1)，
   同级类选择器压不稳；行内样式一定赢。这里只负责形状，绝不在类里写 background-color，
   免得日后有人以为改这儿就能换色。background-image:none 是清掉 common.css 同一条预设。 */
button.hg-avatar-pick__swatch{
  -webkit-appearance:none;appearance:none;box-sizing:border-box;
  width:100%;aspect-ratio:1/1;min-height:28px;padding:0;border:0;border-radius:50%;
  background-image:none;cursor:pointer;transition:transform .12s ease
}
button.hg-avatar-pick__swatch:hover{transform:scale(1.08)}
/* 选中环：内圈先补一圈弹窗底色再画黄环，避免黄环紧贴色块看不出间隙。 */
button.hg-avatar-pick__swatch.is-on{box-shadow:0 0 0 2px #111,0 0 0 4px #ffd21c}
.hg-avatar-pick__actions{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:24px}
.hg-avatar-pick__cancel,button.hg-avatar-pick__ok{
  -webkit-appearance:none;appearance:none;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;
  width:198px;height:42px;padding:0 24px;border-radius:100px;
  font-size:14px;font-weight:500;line-height:normal;white-space:nowrap;cursor:pointer
}
.hg-avatar-pick__cancel{border:1px solid rgba(255,255,255,.1);background:#242426;color:#8e8e93}
button.hg-avatar-pick__ok{
  border:1px solid rgba(255,255,255,.1);
  background:#ffd21c;background-color:#ffd21c;background-image:none;color:#000
}
button.hg-avatar-pick__ok:disabled{opacity:.55;cursor:default}
body.is-hg-avatar-open{overflow:hidden}
@media (max-width:900px){
  .hg-settings{padding:16px var(--hg-page-gutter) 32px}
  .hg-settings__head{margin-top:8px;align-items:flex-start}
  .hg-settings__titles h1{font-size:22px;line-height:30px}
  .hg-settings__titles p{font-size:13px}
  .hg-settings__card{
    min-height:70px;padding:16px 14px;margin-top:12px;gap:12px
  }
  .hg-settings__head + .hg-settings__card{margin-top:16px}
  .hg-settings__left{gap:16px}
  .hg-settings__label{width:auto;text-align:left}
  .hg-settings__avatar{width:45px;height:45px;border-radius:22px}
  .hg-settings__avatar .hg-avatar{font-size:18px}
  .hg-settings__name{font-size:16px}
  .hg-settings__card--edit{min-height:0;padding:16px 14px}
  .hg-settings__nick-row{flex-wrap:wrap;align-items:center}
  .hg-settings__nick-row .hg-settings__label{margin-right:0}
  .hg-settings__input{order:3;flex:1 1 100%;width:100%;margin-top:12px;height:40px}
  .hg-settings__actions{margin-left:auto}
  .hg-settings__ghost,.hg-settings__save{width:72px;height:32px;font-size:13px}
  .hg-settings__act{width:82px;height:32px;font-size:13px}
  button.hg-settings__save{width:82px}
  .hg-settings__hint{margin:8px 0 0}
  .hg-avatar-pick__box{padding:20px}
  .hg-avatar-pick__head h2{font-size:24px}
  /* 窄屏一行摆不下 10 列：390 宽下弹窗内容区仅 303px，摊到 10 列每格不足 20px，
     aspect-ratio 会被 min-height 顶掉、圆点压成小椭圆也点不准。
     改 4 列（20 色 = 五行），每格 ~65px，正圆且够手指点。 */
  .hg-avatar-pick__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .hg-avatar-pick__cancel,.hg-avatar-pick__ok{width:auto;flex:1}
}