/* ============================================================================
   「蝉脉会员中心」入口卡 · 视觉精修  （2026-09-18）
   ---------------------------------------------------------------------------
   用户反馈：「会员中心 UI 界面总感觉差点意思」。
   诊断出的四个具体问题（不是笼统的「不好看」）：
     ① 信息层级做反了 —— 用户最关心的「剩余 N 天 · X 算力豆」被当成灰注释
        （12px / #9C8E7B / 无字重），比标题还弱；
     ② 右侧「进入 ›」是一串裸文字，没有「点我」的行动感，独自悬在右边；
     ③ 质感单薄 —— 一层线性渐变 + 一条边框，没有光、没有层次；
     ④ 图标（金渐变方块 + 👑）里外都是金，图形糊在底色上，对比不够。
   精修方向：左上来光 → 黑金经典（深底 + 金饰），图标改深底金边让皇冠跳出来，
             信息提亮 + 等宽数字，右侧改金色胶囊按钮。
   ---------------------------------------------------------------------------
   ⚠️ 为什么新建文件而不是改 vip.css：
      项目约定「改别人的样式别动原文件」—— 这里用**相同选择器 + 排在 vip.css 之后**覆盖
      （同特异性下后加载者胜）。要撤销只需删掉 index.html 里的这一行 link。
   ============================================================================ */

/* ---------------- VIP 态：底色 / 边框 / 投影 ---------------- */
.mine-vip-entry.is-vip {
  /* 左上角一团暖金光晕 + 深棕黑三段渐变 —— 造出「光从左上来」的立体感 */
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(245, 200, 106, .20) 0%, rgba(245, 200, 106, 0) 58%),
    linear-gradient(132deg, #33261A 0%, #1E1710 58%, #2A2016 100%);
  border-color: rgba(245, 200, 106, .40);
  box-shadow:
    0 12px 30px -12px rgba(217, 154, 34, .55),
    inset 0 1px 0 rgba(255, 236, 196, .18);
}
/* 右上角一枚柔光斑（容器本身已是 position:relative + overflow:hidden，不会撑破页面） */
.mine-vip-entry.is-vip::after {
  content: '';
  position: absolute; right: -34px; top: -48px; width: 150px; height: 150px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(245, 200, 106, .22) 0%, rgba(245, 200, 106, 0) 70%);
}

/* ---------------- 图标：金色方块 → 深底金边「徽章」 ----------------
   原来里外都金，👑 糊在底色上；改深底 + 金细边后，彩色皇冠自己就跳出来了。 */
.mine-vip-entry.is-vip .mi {
  background: linear-gradient(150deg, #3B2D1F 0%, #1D1610 100%);
  box-shadow:
    inset 0 0 0 1px rgba(245, 200, 106, .48),
    0 4px 12px -5px rgba(0, 0, 0, .65);
  font-size: 22px;
}

/* ---------------- 文字层级：把最关心的信息提起来 ---------------- */
.mine-vip-entry.is-vip .mt .a {
  letter-spacing: .3px;
  text-shadow: 0 1px 10px rgba(245, 200, 106, .30);
}
.mine-vip-entry.is-vip .mt .b {
  color: rgba(255, 238, 210, .82);   /* 灰棕 → 暖白，从「注释」升为「信息」 */
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .25px;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;  /* 数字等宽：天数/算力豆位数再多也不跳 */
}
/* 「VIP」标签改「金描边 + 淡金底」：
   把「实心金」这种视觉语言**只留给右侧的行动按钮** —— 否则一张卡上两个金块，
   用户第一眼分不清哪个能点。描边式 = 身份标签，实心式 = 可点。 */
.mine-vip-entry.is-vip .vt {
  background: rgba(245, 200, 106, .14);
  color: #F5C86A;
  letter-spacing: .6px;
  box-shadow: inset 0 0 0 1px rgba(245, 200, 106, .58);
}

/* ---------------- 右侧：裸文字 → 金色胶囊按钮 ---------------- */
.mine-vip-entry.is-vip .go {
  color: #221806;
  background: linear-gradient(135deg, #FFEDBB 0%, #E5AE3A 100%);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .3px;
  box-shadow:
    0 4px 12px -4px rgba(217, 154, 34, .85),
    inset 0 1px 0 rgba(255, 255, 255, .60);
  transition: transform .14s;
}
.mine-vip-entry.is-vip:active .go { transform: scale(.96); }

/* ---------------- 非 VIP 态：同一套语言，换成暖金版 ----------------
   （普通用户看到的是这张，不能只管 VIP 那一版） */
.mine-vip-entry:not(.is-vip) {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(135deg, #FFF7EC 0%, #FFE6C6 100%);
  border-color: rgba(249, 89, 1, .18);
  box-shadow:
    0 10px 24px -12px rgba(249, 89, 1, .38),
    inset 0 1px 0 rgba(255, 255, 255, .85);
}
.mine-vip-entry:not(.is-vip) .mi {
  background: linear-gradient(155deg, #FFEBB6 0%, #F7B94A 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .70),
    0 4px 12px -5px rgba(217, 154, 34, .75);
}
.mine-vip-entry:not(.is-vip) .mt .a { letter-spacing: .3px; }
.mine-vip-entry:not(.is-vip) .mt .b {
  color: #9C7A4E;
  font-weight: 600;
  letter-spacing: .2px;
  font-variant-numeric: tabular-nums;
}
.mine-vip-entry:not(.is-vip) .go {
  color: #fff;
  background: linear-gradient(135deg, #FFA24B 0%, #F95901 100%);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .3px;
  box-shadow:
    0 4px 12px -4px rgba(249, 89, 1, .70),
    inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .14s;
}
.mine-vip-entry:not(.is-vip):active .go { transform: scale(.96); }

/* ---------------- 桌面端：同一档放大（与 profile 入口的处理保持一致） ---------------- */
@media (min-width: 768px) {
  .mine-vip-entry { padding: 18px 20px; gap: 15px; border-radius: 20px; }
  .mine-vip-entry .mi { width: 50px; height: 50px; border-radius: 15px; font-size: 24px; }
  .mine-vip-entry.is-vip .mi { font-size: 25px; }
  .mine-vip-entry .mt .a { font-size: 16.5px; }
  .mine-vip-entry .mt .b { font-size: 13.5px; }
  .mine-vip-entry .go { font-size: 13px; padding: 7px 14px; }
}

/* ============================================================================
   「会员中心」弹层内的修正（同样不动 vip.css）
   ============================================================================ */

/* 🔴 套餐卡的勾选圆 .tick 一直是 position:absolute; left:14px; top:14px ——
   正好压在 .em（图标）身上。实测：em x:31 y:374 (144×30) vs tick x:31 y:372 (17×17)，
   完全重叠，两张卡都被压住，💎/👑 看起来像被折叠糊掉。
   选中态改由名称旁的「当前」文字标签表达（比一个勾更明确），这里把这个圆彻底关掉。
   元素仍在 DOM 里（vip.js 照旧生成），只是不显示 —— 要恢复，删掉这一条即可。 */
.vip-plan .tick { display: none; }

/* 「当前」标签：一眼看出现在生效的是哪一档 */
.vip-plan .nm .cur {
  display: inline-block; margin-left: 6px; vertical-align: 1.5px;
  font-size: 10px; font-weight: 800; letter-spacing: .3px;
  color: #2A1D06; padding: 2px 6px; border-radius: 6px;
  background: linear-gradient(135deg, #FFE9B0, #D99A22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}

/* 非会员的「增购算力豆」按钮：置灰、不可点。
   🔴 2026-09-18 用户定：增购算力豆的前提是会员在（会员期就是豆的使用期限）。
   档位照常展示（让用户看到价格与优惠），但按钮明确「为什么点不了」。 */
.vip-cta[disabled], .vip-cta:disabled {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
  filter: grayscale(.35);
}