/* ===== 联系客服：全站悬浮入口 + 二维码弹窗 =====
   自带样式、不依赖具体页面；颜色走各页已有的设计变量（商城 liuneng.v2.css / 兑换页 style.css），
   取不到时用同一套兜底值，保证三套页面观感一致。 */

.cs-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 900;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border: 1px solid transparent; border-radius: 999px;
  background: var(--ink, #0b0b0c); color: #fff;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1;
  cursor: pointer; transition: .18s ease;
  box-shadow: 0 6px 20px rgba(16, 24, 40, .18);
}
.cs-fab:hover { background: #26272b; transform: translateY(-1px); }
.cs-fab svg { width: 17px; height: 17px; flex: 0 0 auto; }

.cs-mask {
  position: fixed; inset: 0; z-index: 901; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(11, 11, 13, .45);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: cs-fade .18s ease;
}
@keyframes cs-fade { from { opacity: 0 } to { opacity: 1 } }

.cs-card {
  position: relative; width: 100%; max-width: 340px; text-align: center;
  background: var(--surface, #fff); border: 1px solid var(--line, #e7e9ee);
  border-radius: var(--r, 18px); padding: 26px 24px 22px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
  animation: cs-pop .22s cubic-bezier(.2, .8, .2, 1);
}
@keyframes cs-pop { from { opacity: 0; transform: translateY(10px) scale(.98) } to { opacity: 1 } }

.cs-title { font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--ink, #0b0b0c); }
.cs-sub { margin: 8px 0 16px; font-size: 13px; color: var(--muted, #6b7280); line-height: 1.6; }
.cs-qr {
  display: block; width: 100%; max-width: 240px; margin: 0 auto;
  border: 1px solid var(--line, #e7e9ee); border-radius: 12px; background: #fff;
}
.cs-name {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  padding: 8px 14px; border: 1px solid var(--line, #e7e9ee); border-radius: 999px;
  background: #f8f9fb; font-size: 14px; font-weight: 600; color: var(--ink, #0b0b0c);
  cursor: pointer; font-family: inherit; transition: .15s;
}
.cs-name:hover { border-color: #c8ccd4; }
.cs-name small { font-weight: 400; color: var(--muted, #6b7280); }
.cs-tip { margin-top: 14px; font-size: 12px; color: var(--muted, #6b7280); line-height: 1.7; }
.cs-tip b { color: var(--ink, #0b0b0c); }

.cs-close {
  position: absolute; top: 10px; right: 10px; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--muted, #6b7280); font-size: 20px; line-height: 1; cursor: pointer;
}
.cs-close:hover { background: #f3f4f6; color: var(--ink, #0b0b0c); }

@media (max-width: 640px) {
  .cs-fab { right: 14px; bottom: 14px; padding: 11px 16px; font-size: 13px; }
  .cs-card { max-width: 320px; padding: 22px 18px 18px; }
}
@media print { .cs-fab, .cs-mask { display: none !important; } }

/* ===== 页脚客服联系方式（2026-09-22 新增）=====
   支付平台审核要求：全站页脚公示至少一种有效客服联系方式。
   微信号做成按钮：点一下复制并打开客服弹窗（contact.js 里绑定）。 */
.ln-footer-contact {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line, #e7e9ee);
  font-size: 13px; color: var(--muted, #6b7280);
}
/* 页脚是浅底：微信号用正文深色 + 实线描边，保证一眼能看到（审核要求"显眼位置"） */
.cs-foot-wx {
  font: inherit; font-weight: 700; color: var(--ink, #0b0b0c); background: #fff;
  border: 1px solid #d1d5db; border-radius: 8px; padding: 3px 10px;
  cursor: pointer; transition: .15s;
}
.cs-foot-wx:hover { background: #f3f4f6; border-color: #9ca3af; }
.ln-footer-contact .cs-foot-hint { opacity: .85; }

/* 兑换 / 会员页（rx 主题，浅底） */
.rx-sitefoot {
  margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line, #e7e9ee);
  text-align: center; font-size: 12.5px; color: var(--muted, #6b7280); line-height: 2;
}
.rx-sitefoot-links a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.rx-sitefoot-links a:hover { color: var(--ink, #0b0b0c); }
.rx-sitefoot-links span { margin: 0 6px; opacity: .6; }

/* 首屏客服指引（2026-09-24）：放在主按钮下方，是首屏最容易被看到的位置 */
.ln-hero-help{display:flex;align-items:flex-start;gap:9px;margin:18px 0 0;
  padding:12px 15px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:12px;
  font-size:14px;line-height:1.7;color:#14532d;max-width:560px}
.ln-hero-help b{color:#065f46}
.ln-hero-help-dot{flex:0 0 auto;width:8px;height:8px;margin-top:8px;border-radius:50%;
  background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.2)}
@media (max-width:480px){.ln-hero-help{font-size:13.5px;padding:11px 13px}}

/* ===== 2026-10-04：让客服入口有「点进去的理由」 ===== */

/* 悬浮按钮：两行文字（标题 + 利益点）+ 一圈呼吸光晕 */
.cs-fab { align-items: center; padding: 10px 18px 10px 14px; }
.cs-fab-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.cs-fab-txt i { font-style: normal; font-size: 11px; font-weight: 700; color: #6ee7b7; letter-spacing: .02em; }
.cs-fab-ring {
  position: absolute; inset: -3px; border-radius: 999px; pointer-events: none;
  border: 2px solid rgba(110, 231, 183, .55); opacity: 0; animation: cs-pulse 2.8s ease-out infinite;
}
@keyframes cs-pulse {
  0%   { transform: scale(1);    opacity: .75; }
  70%  { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .cs-fab-ring { animation: none; opacity: .4; } }

/* 弹窗里的「加了能得到什么」 */
.cs-perks { list-style: none; margin: 4px 0 16px; padding: 0; text-align: left; }
.cs-perks li {
  display: flex; flex-direction: column; gap: 1px;
  padding: 9px 12px; margin-bottom: 7px; border-radius: 10px;
  background: #f8fafc; border: 1px solid #eef1f5;
}
.cs-perks li b { font-size: 14px; font-weight: 800; color: #0b0b0c; }
.cs-perks li span { font-size: 12.5px; color: #6b7280; line-height: 1.6; }
.cs-perks li:first-child { background: #f0fdf4; border-color: #bbf7d0; }
.cs-perks li:first-child b { color: #15803d; }

/* 二维码：图片本身已裁成 660×660 正方形，这里不再做任何位移裁切 */
.cs-qr-wrap { width: 200px; margin: 0 auto 12px; }
.cs-qr-wrap .cs-qr {
  width: 200px; height: auto; display: block; border-radius: 12px;
  border: 1px solid var(--line, #e7e9ee); background: #fff;
}
