/* ===========================================================================
 * 显示修复 · 「我的」页会员卡 + 登录界面 logo（独立样式表）
 * ---------------------------------------------------------------------------
 * 只做"把显示拉回设计本意"的事，不做重新设计。两个修复各自独立、互不影响。
 *
 * ⚠️ 为什么不直接改 style.css / vip.css：
 *    全站铁律 —— 不改别人的样式文件（多会话并发改同一个文件必然互相覆盖）。
 *    新建独立 css、排在相关文件之后加载，是站内既定做法（coach.css / finance.css 同理）。
 *    本文件在 index.html 里紧跟 vip.css 之后加载，所以能稳定覆盖 style.css 与 vip.css
 *    对同名选择器的定义（同特异性时后加载者胜）。
 *
 * ⚠️ 本文件里所有选择器都带父级限定（.vip-card .vip-avatar / .auth-logo img），
 *    不写裸类名 —— 站内已经出过一次事：vip.css 用裸 `.vip-avatar` 覆盖了
 *    style.css 里同名但属于另一个组件的元素，导致头像变形。
 * =========================================================================== */

/* ===========================================================================
 * 修复 ① 「我的」页顶部会员卡（头像 / 用户名 / 信息层次）
 * ---------------------------------------------------------------------------
 * 1) 头像变成「黑圈 + 中间一个小图形」
 *    原因：vip.css 里「会员卡组件」也用了 `.vip-avatar` 这个类名
 *          （54px / background:#241E18 深棕黑 / 金色描边，见 vip.css:60），
 *          而 vip.css 排 style.css 之后加载 → 同特异性后加载者胜，
 *          「我的」页面顶部的头像被一起刷成了 54px 深色底。
 *          再叠加 `.vip-avatar img { width:70% }`，图片在中间缩成一小块，
 *          四周露出深棕黑 —— 看上去就是"黑圈里一个白色小图形"（其实是缩小的蝉）。
 *
 * 2) 头像被裁成圆形，但它本来是一张**圆角方形**的图标
 *    裁成圆形既丢掉了它自己的形状，也不像 app 图标。这里改回圆角方形，
 *    并且**不铺白底** —— 图片四角本身是透明的，铺白底会在圆角处透出白块，
 *    看着像多了一圈。改成：容器透明 + 2px 白色细边框托出轮廓。
 *
 * 3) 用户名在橘红底上看不清
 *    用户名本身是白色（`style.css` 里 `.vip-card{color:#fff}` 继承下来的），
 *    但在**开启了护眼/暖色调的设备**上，白字会被整体染成暖黄，
 *    叠在橘红背景上对比度掉到 3:1 以下 —— 就是"橘黄配金色，根本看不见"。
 *    这里显式指定白色并加一层**深色柔影**：既不改变卡片配色，
 *    又能在背景上把字"托"起来（阴影比单纯的描边更耐色偏）。
 * =========================================================================== */
.vip-card .vip-avatar {
  width: 86px;
  height: 86px;
  border-radius: 22px;                        /* 圆角方形：贴合图标本身的形状 */
  background: transparent;                    /* 不铺底：避免图片圆角处透出白块 */
  border: 2px solid rgba(255, 255, 255, 0.9); /* 白细边：把橘黄 logo 从橘红底上分出来 */
  box-shadow: 0 6px 18px rgba(110, 35, 0, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  overflow: hidden;                           /* 圆角裁剪靠这一行，缺了图片会溢出成直角 */
  flex: none;
}

/* 图片铺满：cover 而不是 contain —— contain 会留边、露出容器底色（原来的"黑圈"观感） */
.vip-card .vip-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 用户名：显式白色 + 深色柔影（护眼模式下白字会被染黄，靠阴影保住可读性） */
.vip-card .vip-name {
  color: #fff;
  letter-spacing: 0.6px;
  text-shadow: 0 1px 4px rgba(110, 35, 0, 0.5), 0 0 1px rgba(110, 35, 0, 0.35);
}

/* 会员徽章：只留身份、不留天数 —— 天数在下面「蝉脉会员中心」那条里已经有了，
   连着两行都说"剩余 N 天"是重复信息（应用户要求去掉）。文案由 app.js 生成。 */
.vip-card .vip-badge {
  margin-top: 12px;
}

/* ===========================================================================
 * 修复 ② 登录界面 logo 外面多出一圈橘黄色的边（"双层橘黄"）
 * ---------------------------------------------------------------------------
 * 原因：`.auth-logo`（style.css:843）本身是一个 88×88 的**橘黄渐变方块**，
 *       而里面那张 `img/avatar.png` 只占 68%（`.auth-logo img { width:68% }`）。
 *       图片本身又是一张橘黄底的蝉图 → 中间一层橘黄、四周再露出一圈容器橘黄，
 *       看起来就是"logo 外面还套了一圈橘黄边"。
 *
 * 修法：两件事一起做才干净 ——
 *   ① 容器底色交还给图片：容器设 transparent。图片自带橘黄底，
 *      容器再铺一层只会在图片的圆角透明区露出第二种橘黄（就是那圈边的来源）。
 *   ② 图片铺满容器：100% + cover。
 *   结果：就是一个 88px 的橘黄圆角方块 + 白色蝉 —— 即用户要的"就一个橘黄色的 logo"。
 *
 * ⚠️ 只影响「登录 / 注册」全屏层里那一个用图片的 logo。
 *    另一个 `.auth-logo.emoji`（用 emoji 当 logo）自带 `background:#fff`（特异性 0,2,0），
 *    优先级高于这里的 `.auth-logo`（0,1,0），**不受影响**。
 *    容器的橘黄投影保留 —— 它是模糊的立体感，不是"一圈边"；去掉会让 logo 显得发飘。
 * =========================================================================== */
.auth-logo {
  background: transparent;
}
.auth-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ===========================================================================
 * 会员用户名不再描金（2026-09-18 · 用户反馈「金色跟橘黄色不显眼」）
 * ---------------------------------------------------------------------------
 * vip.js:759 会给会员的 #vipName 加 .vip-nickname-glow，
 * vip.css:410 用 `.vip-nickname-glow { color:#E0A02E !important }` 把它刷成金色。
 * 实测：金 #E0A02E 压在卡片橘红渐变（#ffb36b→#f95901→#e04e00）上，
 *       对比度只有 1.43:1 —— 远低于大字及格线 3:1，属"看得见、读不清"。
 *
 * 修法：不碰 vip.css / vip.js，在**后加载**的这里用
 *       **特异性更高 + 同样 !important** 压掉它（`.vip-card .vip-name.x` 比 `.x` 高一级）。
 *       会员身份由下方徽章承担；名字与普通用户一致用白色（+ 深色柔影）。
 * ⚠️ 前提：`.vip-nickname-glow` 全项目**只用在 #vipName 这一处**（已核），
 *          所以影响面仅这一个元素的颜色。
 * =========================================================================== */
.vip-card .vip-name.vip-nickname-glow {
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(110, 35, 0, 0.55), 0 0 1px rgba(110, 35, 0, 0.4);
}