/* 前台样式 · 五种模板共用 */

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

body {
    font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
    background:#0a0e1a; color:#c5c7d0; line-height:1.7;
    padding-bottom:96px; -webkit-font-smoothing:antialiased;
}
body.tpl-wx, body.tpl-gzh { background:#edeef2; color:#333; }

img { max-width:100%; display:block; }

/* ===== 通用底部付款条 ===== */
.paybar {
    position:fixed; left:0; right:0; bottom:0; z-index:40;
    background:rgba(10,14,26,.94); backdrop-filter:blur(14px);
    border-top:1px solid rgba(99,102,241,.2);
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
}
body.tpl-wx .paybar, body.tpl-gzh .paybar {
    background:#fff; border-top:1px solid #e5e5e5;
    box-shadow:0 -3px 14px rgba(0,0,0,.06);
}
.pb-row { display:flex; align-items:center; gap:14px; max-width:560px; margin:0 auto; }
.pb-price { flex-shrink:0; }
.pb-price small { display:block; font-size:11px; color:#6b7294; text-decoration:line-through; }
.pb-price b { font-size:25px; color:#fff; font-weight:800; letter-spacing:-.5px; }
body.tpl-wx .pb-price b, body.tpl-gzh .pb-price b { color:#191919; }
.pb-form { flex:1; }
.pb-form button {
    width:100%; padding:14px; border:0; border-radius:12px; cursor:pointer;
    background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff;
    font-size:15px; font-weight:700; font-family:inherit;
    box-shadow:0 6px 20px rgba(99,102,241,.3);
}
body.tpl-wx .pb-form button { background:#1aad19; box-shadow:none; }
body.tpl-gzh .pb-form button { background:var(--gzh-btn, #c11b1b); box-shadow:none; border-radius:7px; }

/* ===== 客服球 ===== */
.svc-fab {
    position:fixed; right:14px; bottom:104px; z-index:45;
    width:48px; height:48px; border-radius:50%; border:0; cursor:pointer;
    background:linear-gradient(135deg,#6366f1,#a855f7);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 20px rgba(109,94,252,.45);
}
.svc-fab svg { width:23px; height:23px; fill:#fff; }
body.tpl-wx .svc-fab { background:#576b95; }
body.tpl-gzh .svc-fab { background:#1e88e5; }

.svc-mask {
    position:fixed; inset:0; z-index:100; display:none;
    align-items:center; justify-content:center; padding:20px;
    background:rgba(0,0,0,.6);
}
.svc-mask.show { display:flex; }
.svc-card {
    width:100%; max-width:310px; background:#fff; border-radius:18px;
    padding:24px 20px; text-align:center; position:relative; color:#333;
}
.svc-card .x { position:absolute; top:10px; right:14px; border:0; background:none;
    font-size:22px; color:#bbb; cursor:pointer; line-height:1; }
.svc-card h4 { font-size:15px; margin-bottom:14px; color:#111; }
.svc-card img { width:160px; height:160px; object-fit:contain; margin:0 auto 12px; border-radius:10px; }
.svc-card p { font-size:13.5px; margin:6px 0; }
.svc-card b { font-family:Consolas,monospace; color:#6366f1; }

/* ============================================================
   多图群组
   ============================================================ */
.m-hero {
    position:relative; height:340px; background:#141a2e center/cover no-repeat;
    display:flex; align-items:flex-end;
}
.m-hero-mask { position:absolute; inset:0;
    background:linear-gradient(to top, rgba(10,14,26,.96) 0%, transparent 60%); }
.m-hero-in { position:relative; z-index:2; padding:24px 20px; width:100%; text-align:center; }
.m-avatar {
    width:76px; height:76px; border-radius:16px; margin:0 auto 14px;
    object-fit:cover; border:2px solid rgba(255,255,255,.2);
}
.m-hero h1 { font-size:24px; color:#fff; font-weight:800; letter-spacing:-.4px; margin-bottom:10px; }
.m-desc { font-size:13.5px; color:#a9aec2; line-height:1.9; }

.m-body { padding:0 16px 24px; max-width:560px; margin:0 auto; }
.m-stats {
    display:flex; background:rgba(255,255,255,.03); border:1px solid rgba(99,102,241,.16);
    border-radius:14px; padding:16px 8px; margin:18px 0;
}
.m-stat { flex:1; text-align:center; }
.m-stat b { display:block; font-size:19px; color:#a5b4fc; font-weight:800; }
.m-stat span { font-size:11.5px; color:#6b7294; }
.m-sec {
    background:rgba(255,255,255,.03); border:1px solid rgba(99,102,241,.14);
    border-radius:14px; padding:18px; margin-bottom:14px;
}
.m-sec h2 { font-size:15px; color:#fff; margin-bottom:12px;
    padding-left:10px; border-left:3px solid #6366f1; }
.m-text { font-size:13.5px; line-height:2; color:#a9aec2; }

/* ============================================================
   单图群组
   ============================================================ */
.s-cover {
    height:380px; background:#1a1f33 center/cover no-repeat;
    position:relative;
}
.s-cover-empty { background:linear-gradient(160deg,#3b2f7a,#6d5efc 55%,#a855f7); }
.s-body { padding:22px 20px 30px; max-width:560px; margin:0 auto; }
.s-body h1 { font-size:24px; color:#fff; font-weight:800; line-height:1.45;
    letter-spacing:-.4px; margin-bottom:14px; }
.s-desc { font-size:14px; color:#a9aec2; line-height:1.95; margin-bottom:22px; }
.s-sec { margin-bottom:20px; }
.s-sec h2 { font-size:15px; color:#fff; margin-bottom:10px; }
.s-text { font-size:13.5px; line-height:2; color:#a9aec2; }

/* ============================================================
   视频群组
   ============================================================ */
.v-stage { background:#000 center/cover no-repeat; aspect-ratio:16/10; position:relative; }
.v-player { width:100%; height:100%; display:block; object-fit:contain; background:#000; }
.v-placeholder {
    position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:14px;
    background:linear-gradient(150deg,#141a2e,#241b45); color:#6b7294; font-size:12px;
}
.v-play { width:64px; height:64px; border-radius:50%; border:1.5px solid rgba(255,255,255,.35);
    background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; }
.v-play::after { content:''; width:0; height:0; margin-left:5px;
    border-left:19px solid #fff; border-top:12px solid transparent; border-bottom:12px solid transparent; }
.v-body { padding:20px 18px 30px; max-width:560px; margin:0 auto; }
.v-body h1 { font-size:22px; color:#fff; font-weight:800; line-height:1.45; margin-bottom:12px; }
.v-desc { font-size:14px; color:#a9aec2; line-height:1.95; margin-bottom:20px; }
.v-sec { background:rgba(255,255,255,.03); border:1px solid rgba(99,102,241,.14);
    border-radius:14px; padding:18px; margin-bottom:14px; }
.v-sec h2 { font-size:15px; color:#fff; margin-bottom:12px; padding-left:10px; border-left:3px solid #6366f1; }
.v-text { font-size:13.5px; line-height:2; color:#a9aec2; }

/* ============================================================
   微信官方群
   ============================================================ */
.wx-top { height:46px; background:#ededed; display:flex; align-items:center;
    padding:0 16px; font-size:15px; color:#191919; border-bottom:1px solid #dcdcdc; }
.wx-card { background:#fff; margin:14px; border-radius:10px; padding:24px 18px; text-align:center; }
.wx-avatar {
    width:66px; height:66px; margin:0 auto 14px; border-radius:10px; overflow:hidden;
    background:linear-gradient(135deg,#1aad19,#4caf50);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:26px; font-weight:700;
}
.wx-avatar img { width:100%; height:100%; object-fit:cover; }
.wx-card h1 { font-size:17px; font-weight:600; color:#111; margin-bottom:8px; }
.wx-desc { font-size:13px; color:#888; line-height:1.8; margin-bottom:18px; }
.wx-qr-box {
    width:200px; height:200px; margin:0 auto 12px; border:1px solid #e5e5e5;
    border-radius:8px; padding:8px; display:flex; align-items:center; justify-content:center;
    background:#fafafa; color:#bbb; font-size:12px;
}
.wx-qr-box img { width:100%; height:100%; object-fit:contain; }
.wx-tip { font-size:12px; color:#999; line-height:1.8; }
.wx-rows { background:#fff; margin:0 14px 14px; border-radius:10px; overflow:hidden; }
.wx-row { display:flex; justify-content:space-between; padding:14px 16px; font-size:14px; }
.wx-row span { color:#888; font-size:13px; }
.wx-row b { color:#191919; font-family:Consolas,monospace; }
.wx-sec { background:#fff; margin:0 14px 14px; border-radius:10px; padding:16px; }
.wx-sec h2 { font-size:14px; font-weight:600; color:#111; margin-bottom:12px; }
.wx-text { font-size:13px; color:#666; line-height:2; }

/* ============================================================
   公众号风格
   ============================================================ */
.gzh-notice {
    background:rgba(0,0,0,.72); color:#fff; font-size:12px;
    padding:7px 14px; display:flex; align-items:center; gap:7px;
}
.gzh-notice .dot { width:6px; height:6px; border-radius:50%; background:#4ade80; flex-shrink:0; }
.gzh-notice b { color:#a5b4fc; font-weight:500; }
.gzh-poster { height:220px; background:#f3e6e8 center/cover no-repeat; }

.gzh-main { padding:0 18px; text-align:center; }
.gzh-avatar-wrap { margin-top:-38px; margin-bottom:12px; }
.gzh-avatar { width:74px; height:74px; border-radius:8px; margin:0 auto;
    border:2px solid #fff; box-shadow:0 2px 10px rgba(0,0,0,.12); object-fit:cover; }
.gzh-main h1 { font-size:19px; font-weight:700; color:#111; margin-bottom:10px; }
.gzh-sub { font-size:13.5px; color:#c11b1b; line-height:1.9; font-weight:600; padding-bottom:16px; }

.gzh-sec { background:#fff; margin-top:12px; padding:18px 16px 20px; }
.gzh-sec h2 { font-size:15px; font-weight:700; color:#111; margin-bottom:12px; }
.gzh-sec h2 em { font-style:normal; color:#c11b1b; font-size:13px; font-weight:400; margin-left:4px; }
.gzh-text { font-size:13.5px; line-height:2; color:#333; }

.gzh-meta { display:flex; gap:22px; padding:14px 16px; background:#fff; margin-top:12px;
    font-size:12px; color:#888; }
.gzh-cmt { background:#fff; margin-top:12px; padding:18px 16px 10px; }
.gzh-cmt h2 { font-size:15px; font-weight:700; color:#111; margin-bottom:14px; }
.gzh-c { display:flex; gap:10px; padding:12px 0; border-bottom:1px solid #f2f2f2; }
.gzh-c:last-child { border-bottom:0; }
.gzh-c .av { width:32px; height:32px; border-radius:50%; flex-shrink:0;
    background:linear-gradient(135deg,#e6e8f0,#d3d6e3); }
.gzh-c .body { flex:1; min-width:0; }
.gzh-c .nm { font-size:12px; color:#8a8a8a; margin-bottom:4px; }
.gzh-c .tx { font-size:13px; line-height:1.7; color:#333; }
.gzh-c .like { font-size:11px; color:#3b82f6; flex-shrink:0; padding-top:2px; }

/* 品牌页脚 */
.brand-foot { text-align:center; padding:14px 16px 22px; font-size:10.5px;
    letter-spacing:.5px; color:#3d4358; }
.brand-foot b { color:#5a6280; font-weight:500; letter-spacing:2px; margin-left:3px; }
body.tpl-wx .brand-foot, body.tpl-gzh .brand-foot { color:#b8bcc6; }
body.tpl-wx .brand-foot b, body.tpl-gzh .brand-foot b { color:#8e94a3; }

/* ============================================================
   结果页
   ============================================================ */
.rs-wrap { padding:30px 18px; max-width:520px; margin:0 auto; min-height:calc(100vh - 96px);
    display:flex; align-items:center; justify-content:center; }
.rs-card { background:rgba(255,255,255,.03); border:1px solid rgba(99,102,241,.16);
    border-radius:16px; padding:28px 22px; width:100%; text-align:center; }
.rs-icon { width:54px; height:54px; border-radius:50%; margin:0 auto 16px;
    display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:700; }
.rs-icon.ok { background:rgba(74,222,128,.12); color:#4ade80; }
.rs-icon.warn { background:rgba(251,191,36,.12); color:#fbbf24; }
.rs-icon.wait { background:rgba(96,165,250,.12); color:#60a5fa; }
.rs-card h1 { font-size:19px; color:#fff; margin-bottom:8px; }
.rs-card > p { font-size:13px; color:#8b8fa3; line-height:1.9; margin-bottom:18px; }
.rs-qr { margin:18px 0; }
.rs-qr img { width:220px; height:220px; object-fit:contain; margin:0 auto;
    border-radius:12px; background:#fff; padding:8px; }
.rs-tip { font-size:12px; color:#6b7294; margin-top:10px; }
.rs-gno { font-size:15px; color:#fff; padding:20px; background:rgba(99,102,241,.1); border-radius:10px; }
.rs-gno b { font-family:Consolas,monospace; color:#a5b4fc; font-size:19px; }
.rs-hint { font-size:12.5px; color:#fbbf24; }
.rs-meta { display:flex; justify-content:space-between; font-size:12px; color:#6b7294;
    padding:14px 0; border-top:1px solid rgba(99,102,241,.1); margin-top:16px; }
.rs-btn { display:inline-block; margin-top:16px; padding:12px 26px; border-radius:10px;
    background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; text-decoration:none;
    font-size:14px; font-weight:600; }

/* ============================================================
   首页（总站兜底）
   ============================================================ */
.landing { min-height:100vh; display:flex; align-items:center; justify-content:center;
    text-align:center; padding:30px; }
.landing h1 { font-size:24px; color:#fff; margin-bottom:12px; }
.landing p { font-size:13.5px; color:#8b8fa3; line-height:2; }

@media (max-width:480px) {
    .m-hero, .s-cover { height:300px; }
    .pb-price b { font-size:22px; }
    .rs-qr img { width:190px; height:190px; }
}