/* ===== 零一时代 · 超级VIP 会员弹窗（F2 藏蓝硬边）=====
   全部类名 lyvip- 前缀，样式挂在 #lyvipMask 下，避免污染全站 */

#lyvipMask {
  position: fixed; inset: 0; z-index: 99990;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(5, 9, 22, .66);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 1;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}
#lyvipMask.lyvip-out { animation: lyvipOut .18s ease forwards; pointer-events: none; }
@keyframes lyvipOut { from { opacity: 1; } to { opacity: 0; } }
#lyvipMask * { box-sizing: border-box; }

#lyvipMask .lyvip-card {
  position: relative; flex: none;
  width: 600px; max-width: 100%;
  max-height: calc(100vh - 40px); overflow-y: auto;
  padding: 26px 28px 22px;
  border-radius: 12px;
  background: #0A1B3D;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(217, 179, 104, .24);
  color: #fff; text-align: left;
  animation: lyvipRise .30s cubic-bezier(.22, .8, .3, 1) both;
}
/* 只动 transform，不动 opacity：万一样式表里动画不跑，元素也一定是可见的，
   不会出现「看不见但挡点击」的遮罩 */
@keyframes lyvipRise {
  from { transform: translateY(16px) scale(.992); }
  to { transform: none; }
}

/* 左上角 VIP 角标 */
#lyvipMask .lyvip-badge {
  position: absolute; top: 0; left: 28px;
  padding: 5px 11px 6px;
  font-size: 9.5px; font-weight: 900; letter-spacing: .22em;
  color: #22160A;
  background: linear-gradient(180deg, #F3DCA8, #D9B368);
  border-radius: 0 0 5px 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .34);
}

/* 关闭 */
#lyvipMask .lyvip-x {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: rgba(255, 255, 255, .52);
  font-size: 22px; line-height: 1;
  transition: color .18s, background .18s, transform .18s;
}
#lyvipMask .lyvip-x:hover { color: #fff; background: rgba(255, 255, 255, .16); transform: rotate(90deg); }

/* 标题 */
#lyvipMask .lyvip-head { padding-right: 34px; }
#lyvipMask .lyvip-head h3 {
  margin: 0; font-size: 24px; font-weight: 800; letter-spacing: .06em; line-height: 1.16; color: #fff;
}
#lyvipMask .lyvip-head h3 em { font-style: normal; color: #E8C88A; }
/* 只在窄屏生效的换行点，避免标题末尾掉单字 */
#lyvipMask .lyvip-br { display: none; }
#lyvipMask .lyvip-head p {
  margin: 5px 0 0; font-size: 12px; line-height: 1.4;
  color: rgba(255, 255, 255, .58); letter-spacing: .04em;
}

/* 档位切换 */
#lyvipMask .lyvip-seg { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#lyvipMask .lyvip-seg button {
  height: 40px; border-radius: 6px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .04em;
  color: rgba(255, 255, 255, .60);
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .11);
  transition: all .18s;
}
#lyvipMask .lyvip-seg button b { font-size: 13.5px; font-variant-numeric: tabular-nums; }
#lyvipMask .lyvip-seg button:hover {
  color: #fff; border-color: rgba(217, 179, 104, .48); background: rgba(217, 179, 104, .07);
}
#lyvipMask .lyvip-seg button.on {
  color: #fff; border-color: #DFBE80;
  background: rgba(217, 179, 104, .13);
  box-shadow: inset 0 0 0 1px rgba(223, 190, 128, .30), 0 6px 16px rgba(0, 0, 0, .28);
}
#lyvipMask .lyvip-seg button.on b { color: #E8C88A; }

/* 权益清单 */
#lyvipMask .lyvip-panel { display: none; margin-top: 12px; }
#lyvipMask .lyvip-panel.on { display: block; }
#lyvipMask .lyvip-list { list-style: none; margin: 0; padding: 0; border-radius: 7px; overflow: hidden; }
#lyvipMask .lyvip-list li {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; margin: 0;
  font-size: 12.5px; line-height: 1.35;
  color: rgba(255, 255, 255, .78);
  border-left: 2px solid transparent;
  transition: background .16s, color .16s;
}
#lyvipMask .lyvip-list li:nth-child(odd) { background: rgba(255, 255, 255, .030); }
#lyvipMask .lyvip-list li:hover { background: rgba(255, 255, 255, .075); border-left-color: #DFBE80; color: #fff; }
#lyvipMask .lyvip-list li.is-off { color: rgba(255, 255, 255, .36); }
#lyvipMask .lyvip-list li.is-off .lyvip-v { color: rgba(255, 255, 255, .26); }
#lyvipMask .lyvip-list li.is-hl {
  color: #E8C88A; font-weight: 700; background: rgba(217, 179, 104, .10);
}
#lyvipMask .lyvip-list li.is-hl .lyvip-v { color: #D9B368; }
#lyvipMask .lyvip-dot {
  flex: none; width: 15px; height: 15px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 900; line-height: 1;
  background: rgba(255, 255, 255, .10); color: rgba(255, 255, 255, .72);
}
#lyvipMask .lyvip-dot.ok { background: rgba(217, 179, 104, .18); color: #E8C88A; }
#lyvipMask .lyvip-list li.is-off .lyvip-dot { background: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .30); }
#lyvipMask .lyvip-nm { min-width: 0; }
#lyvipMask .lyvip-v { margin-left: auto; font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .34); white-space: nowrap; }

/* 主按钮 */
#lyvipMask .lyvip-cta {
  display: block; width: 100%; margin-top: 14px;
  padding: 13px 10px; border: 0; border-radius: 6px; cursor: pointer;
  font-family: inherit; font-size: 14.5px; font-weight: 800; letter-spacing: .05em;
  color: #22160A;
  background: linear-gradient(180deg, #F3DCA8, #D9B368);
  box-shadow: 0 10px 24px rgba(217, 179, 104, .26);
  transition: transform .16s, filter .16s;
}
#lyvipMask .lyvip-cta:hover { transform: translateY(-1px); filter: brightness(1.06); }
#lyvipMask .lyvip-note {
  margin-top: 9px; text-align: center; font-size: 10.5px;
  color: rgba(255, 255, 255, .27); letter-spacing: .04em;
}
#lyvipMask .lyvip-note b { color: #D9B368; font-weight: 700; }

/* ===== 窄屏（H5 / 手机浏览器）===== */
@media (max-width: 640px) {
  #lyvipMask { padding: 16px; }
  #lyvipMask .lyvip-card {
    width: 100%; max-width: 352px; padding: 22px 18px 18px; border-radius: 12px;
  }
  #lyvipMask .lyvip-badge { left: 18px; padding: 4px 9px 5px; font-size: 8.5px; }
  #lyvipMask .lyvip-x { top: 8px; right: 8px; width: 28px; height: 28px; font-size: 20px; }
  #lyvipMask .lyvip-head h3 { font-size: 19px; letter-spacing: .03em; }
  #lyvipMask .lyvip-br { display: block; height: 0; overflow: hidden; }
  #lyvipMask .lyvip-head p { font-size: 11px; }
  #lyvipMask .lyvip-seg { margin-top: 14px; gap: 7px; }
  #lyvipMask .lyvip-seg button { height: 37px; font-size: 12px; }
  #lyvipMask .lyvip-seg button b { font-size: 12.5px; }
  #lyvipMask .lyvip-panel { margin-top: 10px; }
  #lyvipMask .lyvip-list li { padding: 8px 10px; font-size: 11.5px; gap: 7px; }
  #lyvipMask .lyvip-dot { width: 14px; height: 14px; font-size: 8px; }
  #lyvipMask .lyvip-v { font-size: 10.5px; }
  #lyvipMask .lyvip-cta { margin-top: 12px; padding: 12px 8px; font-size: 14px; border-radius: 6px; }
  #lyvipMask .lyvip-note { font-size: 10px; margin-top: 8px; }
}