/* ═══════════════════════════════════════════════════════════════
   我的页皮肤 v1.0 · 1:1 复刻 client-v2.html 的我的页（#p-profile）
   ───────────────────────────────────────────────────────────────
   性质：纯追加覆盖层。回滚：删除本文件 + 删除 index.html 中 1 行 link。
   机制：加载于既有样式之后，靠"同权重后者生效"覆盖；严禁 !important。
   ⚠ 本文件所有选择器一律加 `#page-profile ` 前缀（必需）：
      · .product-card/.product-image/.product-title/.price/.meta-text/
        .product-badge 被 设备页(#page-nearby)/商品详情页(#page-product-detail) 共用
      · .comment-original-post / .post-* / .identity-badge.official 被
        公示页(#page-circle)/评论详情页(#page-comment-detail) 共用
      · .remark-overlay/.remark-dialog/.remark-title/.remark-input/.remark-count/
        .remark-actions/.remark-btn 被 聊天信息页备注名称浮窗(#remarkOverlay) 共用
      加前缀后：我的页覆盖到位、其余页面零污染。
   依赖：复用 skin-nearby.css 已声明的 :root 设计令牌。
      ⚠ 模板(client-v2)令牌名与本项目不同，映射表（照抄 var(--line) 会静默失效）：
        --bg→--canvas  --bg-soft→--surface-soft  --bg-strong→--surface-strong
        --line→--hairline-soft  --line-strong→--hairline  --faint→--muted-soft
        --alert→本项目 :root 未定义（全站 #C13515 仅出现 1 次），本文件在
                #page-profile 内补 --alert:#C13515
   设计规范（client-v2 六项锁死规格）：
      圆角 4 档 8/14/20/圆形 · 字阶 7 档 20/16/14/13/12/11/18 · 灰阶 5 档
      唯一阴影层 --elev · 每页主题色最多 4 处 · 发丝线 --hairline(-soft)
   保留的原类名/DOM（不得改名、不得重排，JS 依赖）：
     #profileLoggedInView / #profileLoggedOutView / #profileFavoriteContent
     / #myAvatar / #myName / #myRegisterTime / #avatarChangeBtn / #avatarFileInput
     / #favoriteProductCount / #favoriteNoticeCount / #changeNameBtn
     / #changePasswordBtn / #logoutBtn / .ph-tabs [data-profile-tab]
     / #profileNameOverlay + #profileNameInput/-Count/-Error/-Cancel/-Ok
     / #profilePasswordOverlay + #profileOld|New|ConfirmPassword + 3 个 Error
     / #profileLogoutOverlay + #profileLogoutCancel/-Ok
     / #profileLangWrap / #profileLangBtn / .profile-lang-item[data-lang]
     / [data-product-id] / [data-post-id]（点击委托）
   ═══════════════════════════════════════════════════════════════ */

/* 本页主题：一律使用「退出登录」棕红 #C13515（用户拍板：我的页彩色统一为棕，
   以区别于设备(橙红)/回收(蓝)/公示(紫)/客服(青绿)；与底导 [data-theme="profile"] 同色）
   覆盖面：商品价格 / 商品角标 / 官方徽章 / 公示状态徽章(进行中) / 弹窗确定按钮 /
           弹窗输入框 focus 描边 / 语言菜单选中与勾选 / 未登录登录按钮 / Tab 下划线 */
#page-profile{
  --theme:#C13515;
  --theme-active:#A52A0F;
  --theme-soft:#FBEDE9;
  --alert:#C13515;          /* 模板 --alert；本项目 :root 未定义，仅本页补 */
  --tab-on:#C13515;         /* Tab 下划线（:root 为橙红 #FF5C39，本页需覆盖） */
}

/* ───────── §1 头图 + 个人信息（骨架=原版：头像昵称压在图上，素材保留真图） ───────── */
#page-profile .ph-camera-btn{ background:var(--ink); font-size:14px; }
#page-profile .ph-camera-btn:active{ background:#34383D; }
#page-profile .ph-name{ font-size:var(--t-title); font-weight:700; }   /* 22 → 20px */
#page-profile .ph-register-time{ margin-top:8px; font-size:var(--t-caption); }
/* 名称 + 官方徽章：间距 5px（全站统一值） */
#page-profile .ph-name{ gap:5px; }

/* ───────── §2 白卡（负上移覆盖头图） ───────── */
#page-profile .ph-card{
  margin-top:-24px;
  padding:20px 16px calc(24px + env(safe-area-inset-bottom,0px));
  background:var(--canvas);
  border-radius:var(--r-lg) var(--r-lg) 0 0;     /* 18 → 20px */
}

/* ───────── §3 收藏统计（数字为主力信息） ───────── */
/* 纯展示区（用户拍板）：去掉手型指针 + 去掉 data-profile-tab，点击不再切换 Tab
   （切换统一交给下方 .ph-tabs，避免误点）；DOM 标签与字体栈零改动 */
#page-profile .ph-collection-stats{ padding-bottom:18px; }
#page-profile .ph-collection-stats button{ color:var(--ink); cursor:default; }
#page-profile .ph-collection-stats button + button{ border-left:1px solid var(--hairline-soft); }
#page-profile .ph-collection-stats strong{
  font-size:22px; font-weight:700; line-height:1;
  color:var(--ink); font-variant-numeric:tabular-nums;   /* 20 → 22px + 等宽数字 */
}
/* line-height 1.3 → 13px 行盒 17px。模板同字号 normal 行高，但本页字体栈(--font-cjk)
   把 normal 算成 19px（高 2px），会把 3 按钮/分割线/Tab/收藏内容整体下推 2px */
#page-profile .ph-collection-stats span{ font-size:var(--t-caption); line-height:1.3; color:var(--muted-soft); }

/* ───────── §4 3 个横排操作按钮 ───────── */
#page-profile .ph-account-actions button{
  border:1px solid var(--hairline);
  background:var(--canvas);
  color:var(--body);
  font-weight:600;   /* 用户要求加粗。⚠ 本页 button 走 Arial，Arial 只有 400/700 两档：
                        写 500 会被静默回退成 400（实测宽度 88.03px 与 400 完全相同）= 毫无变化；
                        600 与 700 渲染结果也完全相同（95.35px）→ 只能写 600/700 */
}
#page-profile .ph-account-actions button:active{ background:var(--surface-soft); }
#page-profile .ph-account-actions #logoutBtn{ color:var(--alert); }   /* #FF3B30 → #C13515 */

/* ───────── §5 分割线 + Tab ───────── */
#page-profile .ph-divider{ height:1px; background:var(--hairline-soft); margin:20px 0 0; }
#page-profile .ph-tabs{ height:48px; border-bottom:1px solid var(--hairline-soft); }
#page-profile .ph-tabs button{ color:var(--muted-soft); font-size:var(--t-body); }
#page-profile .ph-tabs button.active{ color:var(--ink); font-weight:600; }
#page-profile .ph-tabs button.active::after{
  content:''; position:absolute; left:30%; right:30%; bottom:-1px; height:2px;
  background:var(--tab-on);            /* 本页已把 --tab-on 覆盖为 #C13515，故与主题同色 */
}

/* ───────── §6 收藏内容容器 ───────── */
/* flex:0 0 auto —— 覆盖 layout.css 的 `flex:1 0 auto`。
   原值会让容器按可用高度拉伸（实测拉伸 86px），在「内容 → 列表尾提示」之间凭空产生空隙；
   模板的 .pf-body 是普通块，不存在此拉伸。改为不拉伸后，内容与尾提示紧凑相接，
   卡片仍由 .ph-card 的 flex:1 撑满，多余空白落在尾提示之后（与设备页行为一致）。 */
#page-profile .ph-favorite-content{ flex:0 0 auto; padding-top:20px; }   /* 14 → 20px */
#page-profile .ph-empty{ padding:60px 20px; color:var(--muted-soft); font-size:var(--t-body); }

/* ───────── §7 收藏商品：与设备页同一套（去卡面 + 图片圆角 + 间距） ───────── */
#page-profile .ph-favorite-content .product-grid{ gap:20px 16px; }
#page-profile .ph-favorite-content .product-card{
  background:transparent; border-radius:0; box-shadow:none; overflow:visible;
  display:flex; flex-direction:column; gap:9px;
  transition:transform 100ms ease-out;
}
#page-profile .ph-favorite-content .product-card:active{ transform:scale(.97); }
#page-profile .ph-favorite-content .product-image{
  width:100%; aspect-ratio:1/1; position:relative; overflow:hidden;
  border-radius:var(--r-md); background:var(--surface-strong);
  /* 模板 .card-media 无描边（原 1px 为自加兜底，按模板还原） */
}
#page-profile .ph-favorite-content .product-image img{
  width:100%; height:100%; object-fit:cover;
}
#page-profile .ph-favorite-content .product-badge{
  position:absolute; top:8px; left:8px; height:23px; padding:0 9px;
  display:flex; align-items:center;
  background:var(--theme); color:#fff;
  font-size:var(--t-tiny); font-weight:600; letter-spacing:.2px;
  border-radius:var(--r-full); box-shadow:0 2px 6px rgba(193,53,21,.28);
}
/* 标题→价格行间距：模板由 .card{gap:9px} 承担，本页由 .product-info 承担 → 6 → 9px */
#page-profile .ph-favorite-content .product-info{ padding:0; display:flex; flex-direction:column; gap:9px; }
#page-profile .ph-favorite-content .product-title{
  font-size:13.5px; font-weight:500; color:var(--ink); line-height:1.42;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
#page-profile .ph-favorite-content .product-price-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:6px;
}
#page-profile .ph-favorite-content .price{
  font-size:17px; font-weight:700; color:var(--theme);
  font-variant-numeric:tabular-nums; letter-spacing:-.2px; line-height:normal;   /* 1.25 → normal（照模板） */
}
#page-profile .ph-favorite-content .price-symbol{ font-size:var(--t-micro); font-weight:600; margin-right:1px; }
#page-profile .ph-favorite-content .meta-text{ font-size:var(--t-tiny); color:var(--muted-soft); white-space:nowrap; }

/* ───────── §8 收藏公示：与公示页同一套（去卡面 + 发丝线 + 去灰底通栏） ───────── */
/* 去掉旧「灰底通栏」的负外边距与底色；⚠ 必须保留 padding-top:20px
   （原 padding:0 会把 Tab 下划线到第一条帖子的 20px 间距打掉 → 帖子贴着分割线） */
#page-profile .ph-favorite-content.notice-mode{
  margin:0; padding:20px 0 0; background:transparent;
}
#page-profile .ph-card.notice-mode{ padding-bottom:calc(24px + env(safe-area-inset-bottom,0px)); }

#page-profile .ph-favorite-content .comment-original-post{
  background:none; border-radius:0;
  padding:0 0 20px; margin:0 0 20px;
  border-bottom:1px solid var(--hairline-soft);
}
#page-profile .ph-favorite-content .comment-original-post:last-child{
  border-bottom:none; margin-bottom:0;
}
#page-profile .ph-favorite-content .post-header{ display:flex; align-items:center; gap:10px; margin-bottom:0; }
#page-profile .ph-favorite-content .post-avatar{
  width:36px; height:36px; border-radius:50%; overflow:hidden; flex-shrink:0;
  background:var(--surface-strong);
}
#page-profile .ph-favorite-content .post-avatar img{ width:100%; height:100%; object-fit:cover; }
#page-profile .ph-favorite-content .post-user-info{ flex:1; min-width:0; }
#page-profile .ph-favorite-content .post-nickname{
  display:flex; align-items:center; gap:5px;
  font-size:var(--t-body); font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#page-profile .ph-favorite-content .post-time{ font-size:var(--t-micro); color:var(--muted-soft); margin-top:3px; }
#page-profile .ph-favorite-content .post-status-badge{
  height:24px; padding:0 10px; border-radius:var(--r-full);
  font-size:var(--t-tiny); font-weight:600;
  display:flex; align-items:center; flex-shrink:0; align-self:center;
}
#page-profile .ph-favorite-content .post-status-badge.ongoing{ background:var(--theme-soft); color:var(--theme); }
#page-profile .ph-favorite-content .post-status-badge.ended{ background:var(--surface-strong); color:var(--muted-soft); }
#page-profile .ph-favorite-content .post-title{
  margin:12px 0 0; font-size:17px; font-weight:600; line-height:1.35; letter-spacing:-.2px;
  color:var(--ink); font-family:inherit; text-align:left;   /* 去掉旧「Heiti SC」字体覆写 */
}
#page-profile .ph-favorite-content .post-body{
  margin:8px 0 0; font-size:var(--t-body); line-height:1.55; color:var(--body);
}
#page-profile .ph-favorite-content .post-images{ gap:6px; margin:12px 0 0; }
#page-profile .ph-favorite-content .post-img-wrap{ border-radius:var(--r-md); background:var(--surface-strong); }
#page-profile .ph-favorite-content .post-images.single .post-img-wrap.vertical{ width:calc(50% - 3px); }
#page-profile .ph-favorite-content .post-images.double .post-img-wrap{ width:calc(50% - 3px); }

/* 官方徽章：金色镂空 → 淡主题底 + 主题字（与本页头图昵称旁 / 收藏公示内一致） */
#page-profile .identity-badge.official{
  height:17px; padding:0 6px; margin-left:0;
  border:none; border-radius:var(--r-sm);
  background:var(--theme-soft); color:var(--theme);
  font-size:10.5px; font-weight:600; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
}

/* ───────── §9 语言入口（按 UI 规范重设计：提高不透明度 + 唯一阴影层 --elev）
   实测按钮处头图亮度 均值 97 / 最亮 236 / 最暗 31（明暗混杂）→ 原 .18 白底白字在亮处不可辨；
   改为近不透明白胶囊 + 墨黑文字（与设备页「柬埔寨」定位胶囊同族），任何背景都稳定可读。
   翻译图标（fa-language）与 17px 字号保持原样。 ───────── */
#page-profile .profile-lang-wrap{ right:16px; }              /* 12 → 16px */
#page-profile .profile-lang-btn{
  height:34px; padding:0 12px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:var(--ink); font-size:var(--t-caption); font-weight:500;
  box-shadow:var(--elev);
}
#page-profile .profile-lang-btn:active{ background:var(--canvas); }
/* 未登录态：白底页上白按钮不可见 → 深灰镂空线框（沿用原 guest 变体，仅统一规格） */
#page-profile .profile-lang-btn.guest{
  background:transparent;
  border:1px solid rgba(58,60,64,.6);
  color:#3A3C40;
  box-shadow:none;
}
#page-profile .profile-lang-btn.guest:active{ background:rgba(58,60,64,.08); }
/* 下拉菜单：圆角 14px（--r-md）+ 唯一阴影层 --elev */
#page-profile .profile-lang-menu{
  border-radius:var(--r-md);
  box-shadow:var(--elev);
}
#page-profile .profile-lang-item{ border-radius:var(--r-sm); color:var(--ink); font-size:var(--t-body); }
#page-profile .profile-lang-item:active{ background:var(--surface-soft); }
#page-profile .profile-lang-item .lang-check{ color:var(--theme); }
#page-profile .profile-lang-item.current{ color:var(--theme); }

/* ═══════════════════════════════════════════════════════════════
   §10 未登录态（原设计无参考，按 client-v2 六项锁死规格重设：
       圆角 4 档 / 字阶 7 档 / 灰阶 / 唯一阴影层；DOM 与功能零改动）
   ═══════════════════════════════════════════════════════════════ */
#page-profile .ph-logged-out{ background:var(--canvas); padding:32px; }
#page-profile .ph-logged-out-mark{
  width:58px; height:58px; margin:0 auto;
  border:1px solid var(--hairline); border-radius:50%;
  display:grid; place-items:center;
  color:var(--muted-soft); font-size:22px;
}
#page-profile .ph-logged-out-line{ width:36px; height:1px; margin:22px auto; background:var(--hairline); }
#page-profile .ph-logged-out h2{ font-size:var(--t-title); font-weight:600; color:var(--ink); }   /* 17 → 20px */
#page-profile .ph-logged-out p{ margin-top:8px; font-size:var(--t-body); color:var(--muted-soft); }
/* 主行动按钮：主题色实心 + 全圆角（与设备页/回收页登录按钮同一套规格） */
#page-profile .ph-logged-out #profileLoginBtn{
  margin-top:26px; width:100%; max-width:260px; height:44px;
  border:none; border-radius:var(--r-full);
  background:var(--theme); color:#fff;
  font-size:var(--t-subtitle); font-weight:600;
}
#page-profile .ph-logged-out #profileLoginBtn:active{ opacity:.9; }

/* ═══════════════════════════════════════════════════════════════
   §11 三个弹窗（改名 / 改密 / 退出登录）
       原设计无参考，按 client-v2 六项锁死规格重设，与本页风格统一：
         卡片圆角 20px（--r-lg，与白卡同级）+ 唯一阴影层 --elev
         标题 16px（--t-subtitle，原 17px 不在字阶内）
         输入框圆角 8px（--r-sm，与本页 3 按钮一致）
         确定=主题色 / 危险=--alert（与退出登录按钮同色）
       DOM 结构、事件绑定、z-index、显隐逻辑一律不动。
   ═══════════════════════════════════════════════════════════════ */
#page-profile .ph-dialog,
#page-profile .remark-dialog{
  background:var(--canvas);
  border-radius:var(--r-lg);
  box-shadow:var(--elev);
}
/* 标题：16px/600（规范字阶内） */
#page-profile .ph-dialog-title,
#page-profile .remark-title{
  font-size:var(--t-subtitle); font-weight:600; color:var(--ink); text-align:center;
}
/* 正文说明：14px / --body
   ⚠ 原 --muted-soft(#929292) 在白底对比度仅 3.11:1，低于 WCAG AA 4.5:1，用户反馈看不清
   → 改用 --body(#3F3F3F)，实测对比度 10.53:1。本类名全站仅「退出登录」浮窗 1 处使用 */
#page-profile .ph-dialog-body{
  font-size:var(--t-body); line-height:1.55; color:var(--body); text-align:center; padding-bottom:6px;
}
/* 输入框：42px 高 / 圆角 8px / 描边 --hairline / 浅灰底（聚焦转白底 + 主题色描边）
   ⚠ 不覆盖 padding —— .remark-input 需保留右侧 52px 给计数器 */
#page-profile .ph-input,
#page-profile .remark-input{
  height:42px;
  border:1px solid var(--hairline);
  border-radius:var(--r-sm);
  background:var(--surface-soft);
  color:var(--ink);
  font-size:var(--t-body);
}
#page-profile .ph-input:focus,
#page-profile .remark-input:focus{
  background:var(--canvas);
  border-color:var(--theme);            /* 原青绿 #81D8D0 → 本页主题色 */
}
/* 字段标签 */
#page-profile .ph-field{ color:var(--body); font-size:var(--t-caption); }
/* 字数计数 / 校验错误 */
#page-profile .remark-count{ font-size:var(--t-tiny); color:var(--muted-soft); }
#page-profile .ph-input-error,
#page-profile .profile-name-error{ color:var(--alert); font-size:var(--t-micro); line-height:16px; }
/* 底部按钮条：分割线 --hairline-soft；取消=墨黑 / 确定=主题色 / 危险=--alert */
#page-profile .ph-dialog-actions,
#page-profile .remark-actions{
  border-top:1px solid var(--hairline-soft);
}
#page-profile .ph-dialog-actions button,
#page-profile .remark-btn{
  height:44px; background:var(--canvas); font-size:var(--t-subtitle);
}
#page-profile .ph-dialog-actions .cancel,
#page-profile .remark-btn.cancel{
  color:var(--ink);
  border-right:1px solid var(--hairline-soft);
  border-radius:0 0 0 var(--r-lg);
}
#page-profile .ph-dialog-actions .ok,
#page-profile .remark-btn.ok{
  color:var(--theme); font-weight:600;    /* 原青绿 #2BB3A8 → 本页主题色 */
  border-radius:0 0 var(--r-lg) 0;
}
#page-profile .ph-dialog-actions .danger{
  color:var(--alert); font-weight:600;
  border-radius:0 0 var(--r-lg) 0;
}
#page-profile .ph-dialog-actions button:active,
#page-profile .remark-btn:active{ background:var(--surface-soft); }

/* ═══════════════════════════════════════════════════════════════
   §12 列表尾提示（照设备页 .end-tip 规格）
   下方留白对齐「设备页正式版」：设备页 = 自身 34px + 容器 0px = 34px；
   本页 .ph-card 已有 24px 底部内边距 → 尾元素自身取 10px，合计 34px ✓
   （模板为 34 + 24 = 58px，比设备页多 24px）
   ═══════════════════════════════════════════════════════════════ */
#page-profile .end-tip{
  padding:30px 0 10px;
  font-size:var(--t-micro);
  color:var(--muted-soft);
  letter-spacing:.6px;
  text-align:center;
}
/* 空态时不显示尾巴（避免与「暂无收藏商品」重复） */
#page-profile .ph-card:has(#profileFavoriteContent .ph-empty) .end-tip{ display:none; }

/* ═══════════════════════════════════════════════════════════════
   §13 改密浮窗收紧（用户要求：三行输入框上下间距过大 → 挨紧凑一些）
   测量口径：输入框底边 → 下一行标签顶边
     改前 32px = 错误占位 16 + 弹窗行距 10 + 字段内距 6
     改后 20px = 错误占位 14 + 弹窗行距  2 + 字段内距 4
   浮窗总高 386 → 344px；标题→「旧密码」保持 10px 不变
     （gap 由 10→2 会连带压掉标题下间距，故给标题补 margin-bottom:8px，8+2=10 与原值一致）。
   错误占位保留 14px 不塌缩 → 点确定校验报错时布局零跳动。
   ⚠ 作用域锁 #profilePasswordOverlay：改名浮窗(#profileNameOverlay)/退出登录浮窗
     结构不同（无 .ph-password-dialog），不受影响。
   ═══════════════════════════════════════════════════════════════ */
#page-profile .ph-password-dialog{ gap:2px; }                             /* 原 gap:10px（layout.css） */
#page-profile .ph-password-dialog .ph-dialog-title{ margin-bottom:8px; }   /* 补回标题下间距 */
#page-profile .ph-password-dialog .ph-field{ gap:4px; }                    /* 原 6px */
#page-profile .ph-password-dialog .ph-input-error{ min-height:14px; line-height:14px; }  /* 原 16px */

/* 头像可点开大图（2026-10-03 新增；只加光标提示，不改任何尺寸/位置） */
#page-profile .ph-avatar{ cursor:pointer; }