/* ==========================================================================
   轩歌资源站 · 邀请码购买页  v2 (2026-10-30)
   作用域：.xg-page / #chat-modal / #support-chat
   PC：Hero 居中 + 左权益右购买 + 全宽四步 + 底部提示条
   移动：购买卡片优先 + 资源 2×2 + 流程 2×2 + 提示卡片
   ========================================================================== */

:root {
    --xg-bg: #0E1320;
    --xg-bg-2: #0A0E18;
    --xg-header: rgba(18, 24, 37, .92);
    --xg-card: #1B2333;
    --xg-card-2: #242B3B;
    --xg-buy-bg: #352035;
    --xg-pink: #F23585;
    --xg-pink-2: #FF6CAB;
    --xg-pink-line: #EF4C99;
    --xg-blue: #318FF4;
    --xg-cyan: #18C5E7;
    --xg-purple: #8D5BEE;
    --xg-text: #F5F7FC;
    --xg-sub: #AEB8CB;
    --xg-line: #36445B;
    --xg-radius: 18px;
    --xg-maxw: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--xg-bg);
    color: var(--xg-text);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; -webkit-tap-highlight-color: transparent; }
button { font-family: inherit; }
img { max-width: 100%; }

.xg-page {
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(980px 480px at 84% -8%, rgba(141, 91, 238, .18), transparent 72%),
        radial-gradient(760px 420px at 4% 2%, rgba(242, 53, 133, .12), transparent 74%),
        var(--xg-bg);
}

/* ---------- 顶部导航 ---------- */
.xg-top {
    position: sticky; top: 0; z-index: 40;
    background: var(--xg-header);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.xg-top-in {
    max-width: var(--xg-maxw); margin: 0 auto; height: 66px; padding: 0 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.xg-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; min-width: 0; }
.xg-brand-tile {
    width: 36px; height: 36px; flex: none; border-radius: 10px;
    background: linear-gradient(150deg, #FF7FB3, #E01F72 76%);
    display: grid; place-items: center;
    box-shadow: 0 8px 20px -10px rgba(242, 53, 133, .95), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.xg-brand-tile svg { width: 17px; height: 17px; fill: #fff; }
.xg-brand-txt { min-width: 0; }
.xg-brand-name { display: block; font-size: 19px; font-weight: 800; letter-spacing: .2px; line-height: 1.22; }
.xg-brand-sub { display: block; font-size: 10.5px; color: #8B97AE; letter-spacing: .4px; margin-top: 1px; white-space: nowrap; }

.xg-nav { display: flex; align-items: center; gap: 2px; }
.xg-nav a {
    position: relative; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 14.5px; color: #C6CFDF; text-decoration: none;
    padding: 9px 14px; border-radius: 9px;
    transition: color .18s, background .18s;
}
.xg-nav a svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.xg-nav a:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.xg-nav a.is-on { color: #FF6CAB; }
.xg-nav a.is-on::after {
    content: ""; position: absolute; left: 50%; bottom: 1px; transform: translateX(-50%);
    width: 16px; height: 2px; border-radius: 2px; background: #F23585;
}

/* ---------- Hero ---------- */
.xg-hero { position: relative; overflow: hidden; }
.xg-hero-bg {
    position: absolute; inset: 0;
    background-image: var(--xg-hero-img);
    background-repeat: no-repeat;
    background-position: center 44%;
    background-size: cover;
}
.xg-hero-mask {
    position: absolute; inset: 0;
    background:
        radial-gradient(760px 300px at 50% 46%, rgba(12, 17, 29, .50), rgba(12, 17, 29, .66) 60%, rgba(12, 17, 29, .78)),
        linear-gradient(180deg, rgba(12, 17, 29, .66) 0%, rgba(12, 17, 29, .16) 38%, rgba(12, 17, 29, .38) 74%, var(--xg-bg) 100%);
}
.xg-hero-in {
    position: relative; max-width: var(--xg-maxw); margin: 0 auto;
    padding: 44px 24px 34px; text-align: center;
}

.xg-eyebrow {
    display: inline-flex; align-items: center; gap: 14px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .34em; color: #FF8FBE;
    text-transform: uppercase;
}
.xg-eyebrow::before, .xg-eyebrow::after {
    content: ""; width: 54px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 108, 171, .8));
}
.xg-eyebrow::after { background: linear-gradient(90deg, rgba(255, 108, 171, .8), transparent); }

.xg-h1 {
    margin: 12px 0 0; font-size: clamp(32px, 3.5vw, 48px); line-height: 1.16;
    font-weight: 800; letter-spacing: -.5px;
}
.xg-h1 em {
    font-style: normal; color: #FF4F97;
    text-shadow: 0 0 28px rgba(242, 53, 133, .6), 0 0 64px rgba(242, 53, 133, .3);
}
.xg-hero-sub { margin: 12px 0 0; font-size: 15px; color: #C3CCDF; letter-spacing: .3px; }
.xg-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; justify-content: center; }
.xg-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: #DCE4F2; font-weight: 500;
    background: rgba(22, 29, 44, .78);
    border: 1px solid rgba(255, 255, 255, .13);
    padding: 7px 14px 7px 11px; border-radius: 999px;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.xg-chip svg { width: 14px; height: 14px; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.xg-chip.c-blue svg { stroke: #4FA6FF; }
.xg-chip.c-pink svg { stroke: #FF6CAB; }
.xg-chip.c-purple svg { stroke: #A57BFF; }

/* Hero 两侧装饰文案（仅宽屏） */
.xg-hero-side {
    position: absolute; top: 50%; transform: translateY(-50%);
    font-size: 11.5px; line-height: 1.75; color: rgba(216, 224, 240, .52); letter-spacing: .2px;
    max-width: 132px; pointer-events: none;
}
.xg-hero-side-l { left: 26px; text-align: left; }
.xg-hero-side-r { right: 26px; text-align: right; }
.xg-hero-side b { display: block; font-weight: 600; color: rgba(238, 243, 252, .78); margin-bottom: 2px; }
.xg-hero-side i { display: block; width: 22px; height: 2px; border-radius: 2px; background: #F23585; margin-top: 9px; }
.xg-hero-side-r i { margin-left: auto; }

/* ---------- 主体骨架 ---------- */
.xg-main {
    max-width: var(--xg-maxw); margin: 0 auto; padding: 0 24px;
    display: grid; gap: 18px; align-items: stretch;
    grid-template-columns: minmax(0, 1.36fr) minmax(0, 1fr);
}
.xg-s-res { grid-column: 1; grid-row: 1; min-width: 0; }
.xg-s-buy { grid-column: 2; grid-row: 1; min-width: 0; }
.xg-s-steps { grid-column: 1 / 3; grid-row: 2; min-width: 0; }
.xg-s-tips { grid-column: 1 / 3; grid-row: 3; min-width: 0; }
.xg-s-faq { grid-column: 1 / 3; grid-row: 4; min-width: 0; }

/* ---------- 通用卡片 ---------- */
.xg-card {
    background: linear-gradient(180deg, rgba(29, 36, 53, .96), rgba(23, 29, 43, .97));
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: var(--xg-radius);
    box-shadow: 0 24px 50px -36px rgba(0, 0, 0, .95);
}

/* ---------- 权益卡片 ---------- */
.xg-s-res { display: flex; flex-direction: column; }
.xg-res-hd { padding: 24px 26px 0; }
.xg-res-tt {
    display: flex; align-items: center; gap: 9px;
    margin: 0; font-size: 21px; font-weight: 800; letter-spacing: .2px;
}
.xg-res-tt svg { width: 26px; height: 26px; stroke: #FF5C9C; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.xg-res-sub { margin: 10px 0 0; font-size: 17px; font-weight: 700; color: #EDF1F8; }
.xg-res-sub em { font-style: normal; color: #FF4F97; }
.xg-res-desc { margin: 8px 0 0; font-size: 12.5px; color: #8E9CB4; line-height: 1.7; }

.xg-res-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 26px 24px; padding: 22px 26px 24px;
    flex: 1 1 auto; align-content: center;
}
.xg-res { display: flex; align-items: flex-start; gap: 13px; text-align: left; min-width: 0; padding: 4px 0; }
.xg-res-ico {
    width: 44px; height: 44px; flex: none; border-radius: 12px;
    display: grid; place-items: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 20px -16px rgba(0, 0, 0, .9);
}
.xg-res-ico svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.xg-res.tv .xg-res-ico { background: linear-gradient(150deg, #38D8F0, #1D7BF0); }
.xg-res.acg .xg-res-ico { background: linear-gradient(150deg, #FF8BD0, #B14BF0); }
.xg-res.book .xg-res-ico { background: linear-gradient(150deg, #6FA8FF, #3B5BF5); }
.xg-res.music .xg-res-ico { background: linear-gradient(150deg, #46E0B0, #14A98B); }
.xg-res-tx { min-width: 0; }
.xg-res-t { font-size: 15.5px; font-weight: 600; margin: 2px 0 5px; color: #F2F5FA; }
.xg-res-d { font-size: 12px; color: #8B99B1; line-height: 1.6; margin: 0; }

/* ---------- 购买卡片 ---------- */
.xg-buy {
    position: relative; overflow: hidden;
    padding: 22px 22px 20px;
    border-radius: var(--xg-radius);
    border: 1px solid rgba(239, 76, 153, .58);
    background:
        radial-gradient(120% 76% at 100% 0%, rgba(242, 53, 133, .26), transparent 60%),
        linear-gradient(168deg, #3A2336 0%, #2E1D2C 54%, #241A28 100%);
    box-shadow:
        0 0 0 1px rgba(239, 76, 153, .08),
        0 26px 60px -32px rgba(242, 53, 133, .5),
        0 18px 40px -32px rgba(0, 0, 0, .9),
        inset 0 1px 0 rgba(255, 255, 255, .07);
    animation: xgFadeUp .42s cubic-bezier(.22, .7, .3, 1) both;
}
@keyframes xgFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

.xg-buy-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px; }
.xg-buy-id { display: flex; align-items: center; gap: 11px; min-width: 0; }
.xg-buy-tile {
    width: 44px; height: 44px; flex: none; border-radius: 12px;
    background: linear-gradient(155deg, #FF7FB3, #E01F72 78%);
    display: grid; place-items: center;
    box-shadow: 0 10px 22px -12px rgba(240, 36, 134, .95), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.xg-buy-tile svg { width: 23px; height: 23px; stroke: #fff; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.xg-buy-name { font-size: 20px; font-weight: 800; letter-spacing: .3px; margin: 0; line-height: 1.25; }
.xg-buy-sub { font-size: 12px; color: rgba(255, 255, 255, .58); margin: 3px 0 0; }
.xg-buy-tag { font-size: 11px; color: #A38C9C; padding-top: 4px; }

.xg-price { display: flex; align-items: flex-start; gap: 3px; flex: none; }
.xg-price--pc { flex: 1 0 100%; justify-content: center; margin: 14px 0 0; }
.xg-price--m { flex: 0 0 auto; }
.xg-price i { font-style: normal; font-size: 19px; font-weight: 700; color: #FF8FBE; margin-top: 9px; }
.xg-price b {
    font-size: 56px; line-height: 1; font-weight: 800; letter-spacing: -1.5px;
    color: #FF5A9E;
    text-shadow: 0 0 26px rgba(242, 53, 133, .55);
}
.xg-price-note { flex: 1 0 100%; margin: 6px 0 0; text-align: center; font-size: 11.5px; color: rgba(255, 255, 255, .48); line-height: 1.6; }
.xg-price-sub { font-size: 12px; color: rgba(255, 255, 255, .60); margin-top: 8px; }

.xg-pay-hd { font-size: 12.5px; color: #D9C8D5; margin: 18px 0 9px; font-weight: 600; }
.xg-pays { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.xg-pay {
    height: 46px; padding: 0 12px;
    display: flex; align-items: center; gap: 8px;
    border-radius: 11px; cursor: pointer;
    border: 1.5px solid rgba(49, 143, 244, .45);
    background: rgba(26, 36, 56, .55);
    color: #E9EEF8; font-size: 14px; font-weight: 600;
    transition: border-color .2s, background .2s, box-shadow .2s, transform .18s;
}
.xg-pay:hover { border-color: rgba(49, 143, 244, .8); }
.xg-pay img { width: 21px; height: 21px; flex: none; border-radius: 6px; object-fit: contain; }
.xg-pay-name { flex: 1 1 auto; text-align: left; white-space: nowrap; }
.xg-pay-check {
    width: 17px; height: 17px; flex: none; border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .25);
    display: grid; place-items: center;
    transition: background .2s, border-color .2s, box-shadow .2s;
}
.xg-pay-check svg { width: 10px; height: 10px; stroke: #fff; fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .16s; }
.xg-pay.is-on {
    border-color: var(--xg-pink);
    background: rgba(242, 53, 133, .13);
    box-shadow: 0 0 0 3px rgba(242, 53, 133, .12);
}
.xg-pay.is-on .xg-pay-check { background: var(--xg-pink); border-color: var(--xg-pink); box-shadow: 0 0 12px rgba(242, 53, 133, .7); }
.xg-pay.is-on .xg-pay-check svg { opacity: 1; }

.xg-buy-btn {
    width: 100%; height: 48px; margin-top: 14px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    border: 0; border-radius: 11px; cursor: pointer;
    background: linear-gradient(90deg, #FF5C9C, #F02486);
    color: #fff; font-size: 16px; font-weight: 800; letter-spacing: .8px;
    box-shadow: 0 16px 32px -16px rgba(242, 53, 133, .95), inset 0 1px 0 rgba(255, 255, 255, .26);
    transition: filter .18s, transform .16s, box-shadow .2s;
}
.xg-buy-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.xg-buy-btn:hover { filter: brightness(1.06); }
.xg-buy-btn:active { transform: translateY(1px) scale(.997); }
.xg-buy-btn:disabled { cursor: progress; filter: saturate(.85) brightness(.95); }
.xg-buy-btn.is-loading svg { display: none; }
.xg-buy-btn.is-loading::before {
    content: ""; width: 15px; height: 15px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff;
    animation: xgSpin .7s linear infinite;
}
@keyframes xgSpin { to { transform: rotate(360deg); } }

.xg-buy-foot { margin: 11px 0 0; text-align: center; font-size: 11.5px; color: rgba(255, 255, 255, .46); line-height: 1.6; }
.xg-buy-foot a { color: #FF8FBE; text-decoration: underline; text-underline-offset: 2px; }
.xg-buy-foot a:hover { color: #fff; }

/* 移动端三项小说明（PC 不显示） */
.xg-mini {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    margin-top: 14px; padding-top: 13px;
    border-top: 1px solid rgba(255, 255, 255, .09);
}
.xg-mini-i { display: flex; align-items: flex-start; gap: 7px; min-width: 0; }
.xg-mini-ico {
    width: 26px; height: 26px; flex: none; border-radius: 50%;
    display: grid; place-items: center;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .06);
}
.xg-mini-ico svg { width: 13px; height: 13px; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.xg-mini-i:nth-child(1) .xg-mini-ico svg { stroke: #FF6CAB; }
.xg-mini-i:nth-child(2) .xg-mini-ico svg { stroke: #7FB6FF; }
.xg-mini-i:nth-child(3) .xg-mini-ico svg { stroke: #3ED9A4; }
.xg-mini-tx { min-width: 0; padding-top: 1px; }
.xg-mini-t { display: block; font-size: 11.5px; font-weight: 700; color: #F3E8F0; line-height: 1.35; }
.xg-mini-d { display: block; font-size: 10.5px; color: rgba(255, 255, 255, .46); line-height: 1.4; margin-top: 2px; }

/* ---------- 购买流程 ---------- */
.xg-s-steps { padding: 16px 22px; }
.xg-steps-hd { display: none; }

.xg-steps { display: flex; align-items: center; gap: 2px; }
.xg-step { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 12px; }
.xg-step-ico {
    width: 40px; height: 40px; flex: none; border-radius: 50%;
    display: grid; place-items: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 10px 22px -16px rgba(0, 0, 0, .95);
}
.xg-step-ico svg { width: 19px; height: 19px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.xg-step:nth-child(1) .xg-step-ico { background: linear-gradient(150deg, #FF7FB3, #E3227A); }
.xg-step:nth-child(3) .xg-step-ico { background: linear-gradient(150deg, #58B6FF, #2563EB); }
.xg-step:nth-child(5) .xg-step-ico { background: linear-gradient(150deg, #A98BFF, #6D3BE0); }
.xg-step:nth-child(7) .xg-step-ico { background: linear-gradient(150deg, #4FE3C1, #0FA98F); }
.xg-step-tx { min-width: 0; }
.xg-step-t { font-size: 14.5px; font-weight: 700; margin: 0 0 3px; white-space: nowrap; }
.xg-step-t i { font-style: normal; color: #FF6CAB; margin-right: 4px; }
.xg-step-d { font-size: 11.5px; color: #8B99B1; line-height: 1.45; margin: 0; }
.xg-step-arrow { flex: none; width: 18px; display: grid; place-items: center; color: #3C4963; }
.xg-step-arrow svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 底部提示条（PC） ---------- */
.xg-tipsline {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 18px;
    background: rgba(17, 23, 36, .78);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 13px;
}
.xg-tipsline-ico {
    width: 17px; height: 17px; flex: none; border-radius: 50%;
    border: 1.5px solid #6E7C95; color: #8C99AF;
    display: grid; place-items: center; font-size: 11px; font-weight: 700; font-style: normal;
}
.xg-tipsline p { margin: 0; flex: 1 1 auto; font-size: 11.5px; color: #8C99AF; line-height: 1.6; }
.xg-tipsline-nav { display: flex; align-items: center; gap: 9px; flex: none; font-size: 11.5px; }
.xg-tipsline-nav span { color: #3D4A63; }
.xg-tipsline-nav a, .xg-tipsline-nav button {
    color: #7FB6FF; text-decoration: none; background: none; border: 0; padding: 0;
    font-size: 11.5px; cursor: pointer; transition: color .18s;
}
.xg-tipsline-nav a:hover, .xg-tipsline-nav button:hover { color: #FF6CAB; }

/* ---------- 温馨提示卡片（移动端） ---------- */
.xg-tipcard {
    background: linear-gradient(180deg, rgba(28, 37, 54, .96), rgba(22, 29, 43, .97));
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: var(--xg-radius);
    display: flex; flex-direction: column; gap: 12px; padding: 14px;
}
.xg-tips-tt { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; margin: 0 0 8px; }
.xg-tips-tt svg { width: 15px; height: 15px; stroke: #FFC24B; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.xg-tips-ol { margin: 0; padding: 0; list-style: none; counter-reset: xgtip; }
.xg-tips-ol li {
    counter-increment: xgtip; position: relative;
    padding-left: 16px; font-size: 11.5px; line-height: 1.8; color: #9FAABF;
}
.xg-tips-ol li + li { margin-top: 2px; }
.xg-tips-ol li::before { content: counter(xgtip) "."; position: absolute; left: 0; top: 0; color: #6F7D96; font-weight: 700; }
.xg-tips-ol a { color: #7FB6FF; text-decoration: none; }
.xg-tips-ol a:hover { color: #FF6CAB; }
.xg-ghost-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    width: 100%; height: 40px; border-radius: 10px;
    border: 1px solid rgba(239, 76, 153, .5);
    background: rgba(242, 53, 133, .1);
    color: #FF8FBE; font-size: 12.5px; font-weight: 700;
    text-decoration: none; cursor: pointer;
    transition: background .18s, border-color .18s, color .18s;
}
.xg-ghost-btn:hover { background: rgba(242, 53, 133, .2); color: #fff; border-color: var(--xg-pink); }
.xg-ghost-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 页脚 ---------- */
.xg-foot {
    max-width: var(--xg-maxw); margin: 0 auto; padding: 16px 24px 30px;
    text-align: center; color: #4E5A72; font-size: 11px; line-height: 1.8;
}

/* ---------- 在线客服（沿用 chat-v5.js 的 DOM 结构，仅换肤） ---------- */
.chat-mask {
    position: fixed; inset: 0; z-index: 80;
    background: rgba(6, 9, 16, .72);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    display: none; align-items: flex-end; justify-content: center;
}
.chat-mask.open { display: flex; }
.visitor-chat {
    width: min(520px, calc(100vw - 24px));
    background: #151C2A;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 20px 20px 0 0;
    overflow: hidden; color: var(--xg-text);
    box-shadow: 0 -22px 60px rgba(0, 0, 0, .6);
}
.visitor-chat header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 15px 18px; border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.visitor-chat header strong { font-size: 15px; }
.visitor-chat small { display: block; color: #8A96AC; margin-top: 3px; font-size: 11px; line-height: 1.4; }
#close-chat {
    width: 34px; height: 34px; flex: none; border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%; background: rgba(255, 255, 255, .06); cursor: pointer; position: relative;
}
.close-lines::before, .close-lines::after {
    content: ""; position: absolute; left: 10px; right: 10px; top: 16px; height: 2px;
    background: #D8DEEA; border-radius: 999px;
}
.close-lines::before { transform: rotate(45deg); }
.close-lines::after { transform: rotate(-45deg); }
.chat-welcome {
    padding: 11px 18px; font-size: 12px; line-height: 1.7; color: #F3DCE8;
    background: rgba(242, 53, 133, .12); border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.chat-messages { max-height: 340px; overflow: auto; padding: 14px; background: #0F1521; }
.chat-bubble {
    max-width: 82%; margin: 8px 0; padding: 9px 12px; border-radius: 12px;
    background: #202A3C; border: 1px solid rgba(255, 255, 255, .07);
    color: #E6EBF5; font-size: 13px; line-height: 1.6; word-break: break-word;
}
.chat-bubble.admin { margin-left: auto; background: rgba(49, 143, 244, .18); border-color: rgba(49, 143, 244, .32); }
.chat-bubble img { max-width: 200px; border-radius: 10px; display: block; }
.visitor-chat form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid rgba(255, 255, 255, .07); }
.visitor-chat input[name=message] {
    flex: 1; min-width: 0; border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px;
    padding: 10px 12px; background: #0F1521; color: #E6EBF5; font-size: 13px; font-family: inherit;
}
.visitor-chat input[name=message]::placeholder { color: #6C7A93; }
.chat-image { display: inline-flex; align-items: center; cursor: pointer; }
.chat-image input { display: none; }
.chat-image, .chat-send {
    border: 0; border-radius: 10px; background: rgba(255, 255, 255, .08);
    color: #D8DEEA; padding: 10px 12px; font-weight: 700; font-size: 12.5px; cursor: pointer;
}
.chat-send { background: linear-gradient(90deg, #FF5C9C, #F02486); color: #fff; }

/* ==========================================================================
   只在一端显示
   ========================================================================== */
@media (min-width: 901px) { .xg-only-m { display: none !important; } }

/* ==========================================================================
   平板 / 手机
   ========================================================================== */
@media (max-width: 900px) {
    :root { --xg-radius: 16px; }
    .xg-only-pc { display: none !important; }

    .xg-top-in { height: 60px; padding: 0 16px; gap: 10px; }
    .xg-brand { gap: 9px; flex: 0 0 auto; }
    .xg-brand-tile { width: 32px; height: 32px; border-radius: 9px; }
    .xg-brand-name { font-size: 17px; white-space: nowrap; }
    .xg-brand-sub { font-size: 9.5px; margin-top: 1px; }
    .xg-nav { gap: 0; }
    .xg-nav a { font-size: 12.5px; padding: 7px 8px; gap: 4px; }
    .xg-nav .xg-nav-pc { display: none; }
    .xg-nav a svg { width: 13px; height: 13px; }
    .xg-nav a.is-on::after { bottom: 0; width: 12px; }
    .xg-nav .xg-nav-pc { display: none; }

    .xg-hero-in { padding: 20px 16px 18px; text-align: left; }
    .xg-hero-bg { background-image: var(--xg-hero-img-m); background-position: 74% 10%; }
    .xg-hero-mask {
        background:
            linear-gradient(90deg, rgba(14, 19, 32, .95) 0%, rgba(14, 19, 32, .82) 42%, rgba(14, 19, 32, .38) 100%),
            linear-gradient(180deg, rgba(14, 19, 32, .3) 0%, rgba(14, 19, 32, .06) 48%, rgba(14, 19, 32, .9) 100%);
    }
    .xg-eyebrow { font-size: 9.5px; letter-spacing: .26em; gap: 8px; }
    .xg-eyebrow::before { width: 22px; }
    .xg-eyebrow::after { display: none; }
    .xg-h1 { font-size: 27px; margin-top: 9px; letter-spacing: -.3px; }
    .xg-hero-sub { font-size: 12.5px; margin-top: 9px; color: #B8C2D6; }
    .xg-chips { gap: 6px; margin-top: 12px; justify-content: flex-start; }
    .xg-chip { font-size: 11px; padding: 5px 10px 5px 8px; gap: 4px; }
    .xg-chip svg { width: 12px; height: 12px; }

    .xg-main { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px 0; }
    .xg-s-buy { order: 1; width: 100%; }
    .xg-s-res { order: 2; width: 100%; }
    .xg-s-steps { order: 3; width: 100%; }
    .xg-s-tips { order: 4; width: 100%; }
    .xg-s-faq { order: 5; width: 100%; }

    /* 购买卡片 */
    .xg-buy { padding: 14px; }
    .xg-buy-tile { width: 42px; height: 42px; border-radius: 12px; }
    .xg-buy-tile svg { width: 21px; height: 21px; }
    .xg-buy-name { font-size: 17px; }
    .xg-buy-sub { font-size: 11px; margin-top: 2px; }
    .xg-price { flex: 0 0 auto; }
    .xg-price i { font-size: 14px; margin-top: 6px; }
    .xg-price b { font-size: 42px; letter-spacing: -1px; }
    .xg-pay-hd { margin: 14px 0 8px; font-size: 12px; }
    .xg-pay { height: 46px; font-size: 13.5px; padding: 0 10px; gap: 6px; }
    .xg-pay img { width: 19px; height: 19px; }
    .xg-buy-btn { height: 52px; margin-top: 12px; font-size: 15.5px; border-radius: 999px; }
    .xg-mini { margin-top: 12px; padding-top: 11px; gap: 6px; }
    .xg-mini-ico { width: 22px; height: 22px; }
    .xg-mini-ico svg { width: 12px; height: 12px; }
    .xg-mini-t { font-size: 10.5px; }
    .xg-mini-d { display: none; }

    /* 权益卡片：改回紧凑 2×2 图标卡 */
    .xg-res-hd { padding: 14px 14px 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .xg-res-tt { font-size: 14px; gap: 7px; }
    .xg-res-tt svg { width: 15px; height: 15px; }
    .xg-res-all { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: #8FA6C8; text-decoration: none; flex: none; }
    .xg-res-all svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .xg-res-grid { grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 14px 14px; }
    .xg-res {
        flex-direction: column; align-items: center; text-align: center;
        padding: 12px 8px 11px; border-radius: 12px;
        background: rgba(255, 255, 255, .035);
        border: 1px solid rgba(255, 255, 255, .06);
    }
    .xg-res-ico { width: 38px; height: 38px; border-radius: 11px; margin-bottom: 8px; }
    .xg-res-ico svg { width: 19px; height: 19px; }
    .xg-res-t { font-size: 12.5px; margin: 0 0 3px; }
    .xg-res-d { font-size: 10.5px; line-height: 1.5; }

    /* 流程 2×2 */
    .xg-s-steps { padding: 0; background: none; border: 0; box-shadow: none; }
    .xg-steps-hd {
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
        padding: 14px 14px 0;
    }
    .xg-steps-hd h2 { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 14px; font-weight: 700; }
    .xg-steps-hd h2 svg { width: 15px; height: 15px; stroke: #FF6CAB; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .xg-steps-hd button {
        display: inline-flex; align-items: center; gap: 3px; background: none; border: 0; padding: 0;
        font-size: 11.5px; color: #8FA6C8; cursor: pointer;
    }
    .xg-steps-hd button svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .xg-s-steps .xg-card-inner {
        background: linear-gradient(180deg, rgba(28, 37, 54, .96), rgba(22, 29, 43, .97));
        border: 1px solid rgba(255, 255, 255, .075);
        border-radius: var(--xg-radius);
        padding-bottom: 6px;
    }
    .xg-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 6px; padding: 14px 12px 12px; }
    .xg-step { flex: none; flex-direction: column; align-items: center; gap: 0; text-align: center; }
    .xg-step-ico { width: 40px; height: 40px; margin-bottom: 8px; }
    .xg-step-ico svg { width: 19px; height: 19px; }
    .xg-step-t { font-size: 12px; white-space: normal; margin-bottom: 2px; }
    .xg-step-t i { display: none; }
    .xg-step-d { font-size: 10px; }
    .xg-step-arrow { display: none; }

    .xg-foot { padding: 14px 16px 26px; font-size: 10.5px; }
}

@media (min-width: 560px) and (max-width: 900px) {
    .xg-main, .xg-foot { max-width: 680px; }
    .xg-hero-in { max-width: 680px; }
    /* 平板：流程保持 2×2，但改成图标在左、文字在左，宽度够用 */
    .xg-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; padding: 16px 16px 16px; }
    .xg-step { flex-direction: row; align-items: center; gap: 12px; text-align: left; }
    .xg-step-ico { margin-bottom: 0; }
    .xg-step-t { font-size: 13px; }
    .xg-step-d { font-size: 11px; }
}

@media (min-width: 1100px) {
    .xg-hero-side { display: block; }
}
@media (max-width: 1099px) {
    .xg-hero-side { display: none; }
}

@media (max-width: 380px) {
    .xg-brand-sub { display: none; }
    .xg-nav a { padding: 7px 6px; font-size: 12px; }
    .xg-h1 { font-size: 25px; }
    .xg-price b { font-size: 38px; }
}

@media (hover: hover) and (min-width: 901px) {
    .xg-buy-btn:hover { transform: translateY(-1px); box-shadow: 0 20px 38px -16px rgba(242, 53, 133, 1), inset 0 1px 0 rgba(255, 255, 255, .3); }
    .xg-res:hover .xg-res-t { color: #fff; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}


/* 权益卡片：淡粉边 + 内发光，与购买卡片同一气质 */
.xg-s-res {
    border-color: rgba(239, 76, 153, .28);
    box-shadow: 0 0 0 1px rgba(239, 76, 153, .05), 0 24px 50px -36px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .05);
}
@media (max-width: 900px) {
    .xg-s-res { border-color: rgba(239, 76, 153, .2); }
}

/* ---------- 常见问题 / 使用帮助 ---------- */
.xg-s-faq { padding: 20px 24px 8px; }
.xg-faq-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.xg-faq-tt {
    display: flex; align-items: center; gap: 8px; margin: 0;
    font-size: 15.5px; font-weight: 800; letter-spacing: .2px;
}
.xg-faq-tt svg { width: 17px; height: 17px; stroke: #FF5C9C; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.xg-faq-hint { font-size: 12px; color: #7E8CA4; white-space: nowrap; }
.xg-faq-hint button {
    color: #FF6CAB; background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
}
.xg-faq-hint button:hover { text-decoration: underline; }

.xg-faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
.xg-faq-i {
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    padding: 2px 0;
}
.xg-faq-i summary {
    list-style: none; cursor: pointer; position: relative;
    padding: 11px 26px 11px 0; font-size: 13.5px; font-weight: 600; color: #DDE5F2;
    transition: color .18s;
}
.xg-faq-i summary::-webkit-details-marker { display: none; }
.xg-faq-i summary:after {
    content: ""; position: absolute; right: 6px; top: 50%; width: 7px; height: 7px;
    border-right: 1.8px solid #7E8CA4; border-bottom: 1.8px solid #7E8CA4;
    transform: translateY(-70%) rotate(45deg); transition: transform .2s, border-color .2s;
}
.xg-faq-i[open] summary { color: #fff; }
.xg-faq-i[open] summary:after { transform: translateY(-30%) rotate(-135deg); border-color: #FF6CAB; }
.xg-faq-i summary:hover { color: #fff; }
.xg-faq-b {
    padding: 0 26px 13px 0; font-size: 12.5px; line-height: 1.85; color: #93A1B8;
}
.xg-faq-b a { color: #FF6CAB; text-decoration: none; }
.xg-faq-b a:hover { text-decoration: underline; }
.xg-inline-chat { color: #FF6CAB; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.xg-inline-chat:hover { text-decoration: underline; }
.xg-s-faq { scroll-margin-top: 18px; }

@media (max-width: 900px) {
    .xg-s-faq { padding: 18px 16px 6px; }
    .xg-faq-list { grid-template-columns: 1fr; }
    .xg-faq-tt { font-size: 14.5px; }
    .xg-faq-i summary { font-size: 13px; padding: 12px 26px 12px 0; }
    .xg-faq-b { font-size: 12px; }
    .xg-faq-hint { font-size: 11.5px; }
}
@media (max-width: 380px) {
    .xg-faq-hint { display: none; }
}

/* 窄屏：导航只留文字，品牌名不换行，保证一行放下 4 个入口 */
@media (max-width: 430px) {
    .xg-brand-sub { display: none; }
    .xg-brand-name { font-size: 16px; }
    .xg-nav a svg { display: none; }
    .xg-nav a { padding: 8px 7px; font-size: 12.5px; }
}
@media (max-width: 360px) {
    .xg-brand-name { font-size: 15px; }
    .xg-nav a { padding: 8px 5px; font-size: 12px; }
}