@charset "utf-8";
/* =========================================================
   姻缘评估落地页 / 收银台 样式表
   全部资源本地化，无任何外链 CDN、无内联样式
   ========================================================= */

:root {
    --red-deep: #9a0106;
    --red: #c12b34;
    --red-bright: #e2232a;
    --cream: #fdf3cd;
    --green: #42ae37;
    --green-dark: #33a02b;
    --gold: #ffd94a;
    --font-cn: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Heiti SC", sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-cn);
    background: #9a0106;
    color: #fff;
    font-size: 15px;
    line-height: 1.6;
    overflow-x: hidden;
}

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

a {
    color: inherit;
    text-decoration: none;
}

/* ---------- 通用容器 ---------- */
.wrap {
    max-width: 640px;
    margin: 0 auto;
    overflow: hidden;
}

/* 全宽条带图（顶饰 / 标题 / 徽章 / 底饰） */
.strip {
    width: 100%;
}

/* =========================================================
   第一页：你的姻缘有多稳？
   ========================================================= */
.wrap.p1 {
    background: linear-gradient(180deg,
        #6e0103 0%,
        #a30405 9%,
        #9d0203 24%,
        #a51410 29%,
        #b0241a 32%,
        #c5271e 36%,
        #bd1b17 52%,
        #b51613 66%,
        #ab0d0f 80%,
        #9a0106 100%);
}

/* 标题与面板之间的过渡带：祥云 + 金边按钮 */
.hero-mid {
    position: relative;
    padding: 2px 0 6px;
}

.hero-mid .cloud {
    position: absolute;
    bottom: -4px;
    width: 30%;
    pointer-events: none;
}

.hero-mid .cl-l {
    left: 0;
}

.hero-mid .cl-r {
    right: 0;
}

.gold-link {
    position: relative;
    z-index: 1;
    display: block;
    width: 34%;
    margin: 0 auto;
    transition: transform .12s ease;
}

.gold-link:active {
    transform: scale(.97);
}

.gold-btn,
.gold-btn2 {
    width: 100%;
}

/* ---------- 中部红色面板 ---------- */
.panel {
    position: relative;
    margin: 0 4.8%;
    padding: 16px 10px 20px;
    border: 2px solid rgba(246, 215, 137, .85);
    border-bottom: 0;
    border-radius: 26px 26px 0 0;
    background: linear-gradient(180deg, #cf3324 0%, #bd1b17 55%, #b21513 100%);
    box-shadow: 0 -2px 10px rgba(90, 5, 5, .25);
    text-align: center;
}

.panel-title {
    font-size: clamp(19px, 5.6vw, 25px);
    font-weight: 800;
    letter-spacing: 1px;
    color: #fff;
    text-shadow: 0 2px 4px rgba(90, 5, 5, .4);
}

.panel .heart {
    width: 23%;
    margin: 12px auto 10px;
}

/* 立即测算（金色渐变按钮） */
.btn-calc {
    display: inline-block;
    margin-top: 16px;
    padding: 10px 46px;
    border-radius: 999px;
    background: linear-gradient(180deg, #f9d47c 0%, #f0b04c 55%, #dd8f2e 100%);
    color: #fff;
    font-size: clamp(17px, 4.8vw, 21px);
    font-weight: 700;
    letter-spacing: 2px;
    text-shadow: 0 1px 2px rgba(140, 80, 10, .45);
    box-shadow: 0 3px 8px rgba(120, 50, 5, .35);
    transition: transform .12s ease;
}

.btn-calc:active {
    transform: translateY(1px);
}

/* ---------- 优惠信息 ---------- */
.offer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 22px;
}

.offer-tag {
    padding: 4px 14px;
    background: #d2140a;
    border: 2px solid #f6d789;
    border-radius: 4px;
    color: #fff;
    font-size: clamp(16px, 4.8vw, 20px);
    font-weight: 800;
    letter-spacing: 1px;
    white-space: nowrap;
}

.offer-right {
    flex-basis: 100%;
    font-size: clamp(12px, 3.6vw, 14px);
    color: #ffe3c2;
    letter-spacing: 2px;
    white-space: nowrap;
}

.panel-hr {
    height: 1px;
    margin-top: 20px;
    background: linear-gradient(90deg, rgba(255, 227, 194, 0), rgba(255, 227, 194, .75), rgba(255, 227, 194, 0));
}

/* ---------- 微信支付按钮（两页通用） ---------- */
.btn-wechat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: calc(100% - 56px);
    max-width: 560px;
    margin: 20px auto 0;
    min-height: 58px;
    padding: 10px 16px;
    border-radius: 12px;
    background: linear-gradient(180deg, #4cbb3e, var(--green-dark));
    color: #fff;
    font-size: clamp(19px, 5.6vw, 23px);
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(30, 90, 20, .4);
    transition: transform .12s ease, opacity .12s ease;
}

.btn-wechat:active {
    transform: translateY(1px);
    opacity: .92;
}

.btn-wechat .ico {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
}

.btn-block {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    letter-spacing: 1px;
}

/* ---------- 认证徽章与安全提示 ---------- */
.badges-img {
    margin-top: 20px;
}

.safe-tip {
    margin: 14px 12px 22px;
    text-align: center;
    font-size: clamp(14px, 4vw, 16px);
    font-weight: 700;
    color: #fff;
}

/* =========================================================
   第二页：金环红心 + 老师微信
   ========================================================= */
.wrap.p2 {
    background: linear-gradient(180deg,
        #e93b12 0%,
        #d21a0a 26%,
        #cf1608 55%,
        #c11407 100%);
}

/* 金环红心 + 两侧祥云 */
.hero2-art {
    position: relative;
    padding: 4px 0 14px;
    text-align: center;
}

.hero2-art .cloud2 {
    position: absolute;
    top: 12%;
    width: 28%;
    pointer-events: none;
}

.hero2-art .cl2-l {
    left: 0;
}

.hero2-art .cl2-r {
    right: 0;
}

.hero2-art .ring {
    position: relative;
    z-index: 1;
    width: 45%;
    margin: 0 auto;
}

.hero2-art .gold-link {
    width: 37%;
    margin-top: 8px;
}

/* ---------- 米色内容面板 ---------- */
.cream {
    background: linear-gradient(180deg, #fef7da 0%, #f9ecc6 100%);
    padding: 16px 14px 8px;
    text-align: center;
}

.cream .pill {
    width: 40%;
    margin: 0 auto 14px;
}

/* 三张红色服务卡 */
.cards {
    display: flex;
    gap: 9px;
}

.card3 {
    flex: 1 1 0;
    padding: 13px 4px 14px;
    border: 2px solid #f6d789;
    border-radius: 10px;
    background: linear-gradient(180deg, #e23a24 0%, #c31a13 100%);
    box-shadow: 0 2px 6px rgba(140, 40, 10, .18);
}

.card3 img {
    width: 44px;
    height: 44px;
    margin: 0 auto 4px;
}

/* 图标下的小绶带 */
.card3::after {
    content: "";
    display: block;
    width: 3px;
    height: 12px;
    margin: -8px auto 6px;
    background: linear-gradient(180deg, #f0b04c, #d8862a);
    border-radius: 2px;
}

.card3 p {
    font-size: clamp(14px, 4vw, 17px);
    font-weight: 800;
    line-height: 1.35;
    color: #fff;
    letter-spacing: 1px;
}

/* ---------- 隐私提醒 ---------- */
.privacy {
    margin-top: 16px;
    padding: 16px 12px 18px;
    border-radius: 4px;
    background: #ec2118;
    text-align: left;
}

.privacy-title {
    font-size: clamp(18px, 5.2vw, 22px);
    font-weight: 800;
    letter-spacing: 2px;
    color: #ffe08a;
}

.privacy-body {
    margin-top: 8px;
    font-size: clamp(15px, 4.4vw, 18px);
    font-weight: 700;
    line-height: 1.75;
    color: #fff;
}

.reveal-foot {
    margin: 14px 0 10px;
    text-align: center;
    font-size: 12px;
    color: #b3a48e;
}

/* ---------- 轻提示 ---------- */
.toast {
    position: fixed;
    left: 50%;
    bottom: 12%;
    transform: translateX(-50%);
    max-width: 78%;
    padding: 10px 16px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .78);
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;
}

.toast.show {
    opacity: 1;
    visibility: visible;
}

/* =========================================================
   收银台 / 结果页
   ========================================================= */
.cash-wrap {
    padding: 20px 0 34px;
}

.cash-card {
    margin: 16px 14px 0;
    padding: 22px 18px;
    border-radius: 14px;
    background: #fff;
    color: #3f2c22;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .09);
}

.cash-title {
    text-align: center;
    font-size: clamp(17px, 4.8vw, 20px);
    font-weight: 700;
}

.cash-amount {
    margin: 12px 0 18px;
    text-align: center;
    color: var(--red-bright);
    font-weight: 800;
}

.cash-amount .cur {
    font-size: 20px;
    margin-right: 2px;
}

.cash-amount .num {
    font-size: 40px;
    line-height: 1;
}

.cash-list {
    border-top: 1px solid #eee;
}

.cash-list li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding: 9px 2px;
    border-bottom: 1px solid #f2f2f2;
    font-size: 14px;
}

.cash-list li span {
    color: #6b5b50;
    flex: 0 0 auto;
}

.cash-list li b {
    font-weight: 600;
    text-align: right;
    word-break: break-all;
}

/* ---------- 支付方式徽标 / 商品名 ---------- */
.cash-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #2f7d28;
}

.cash-badge img {
    width: 22px;
    height: 22px;
}

.cash-goods {
    margin: -10px 0 12px;
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
    color: #8b8177;
    word-break: break-all;
}

/* ---------- 手机端唤起微信 ---------- */
.wake-box {
    margin-top: 6px;
}

.wake-tip {
    margin-bottom: 12px;
    text-align: center;
    font-size: clamp(14px, 4vw, 16px);
    font-weight: 700;
    color: #3f2c22;
}

.wake-btn {
    width: 100%;
    margin: 0;
    letter-spacing: 1px;
}

.wake-hint {
    margin-top: 10px;
    text-align: center;
    font-size: 12px;
    color: #9a9a9a;
}

/* ---------- 电脑端扫码 ---------- */
.qr-box {
    margin-top: 10px;
    text-align: center;
}

.qr-tip {
    font-size: clamp(14px, 4vw, 16px);
    font-weight: 700;
    color: #3f2c22;
}

.qr-img {
    width: 216px;
    height: 216px;
    margin: 12px auto;
    padding: 8px;
    border: 1px solid #f0e2c8;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(120, 60, 20, .08);
}

.qr-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.qr-money {
    font-size: 17px;
    font-weight: 800;
    color: var(--red-bright);
}

/* ---------- 降级提示 ---------- */
.cash-error {
    margin: 12px 0 16px;
    padding: 10px 12px;
    border: 1px solid #f5c2bc;
    border-radius: 8px;
    background: #fff4f2;
    font-size: 13px;
    line-height: 1.65;
    color: #b93a2c;
}

.cash-meta {
    margin-top: 20px;
}

.cash-meta li {
    font-size: 12px;
    color: #9a9a9a;
}

.cash-btn {
    width: 100%;
    margin-top: 22px;
    cursor: pointer;
    border: 0;
    font-family: var(--font-cn);
}

.cash-hint {
    margin-top: 12px;
    text-align: center;
    font-size: 12px;
    color: #9a9a9a;
    line-height: 1.6;
}

.cash-back {
    margin-top: 10px;
    text-align: center;
    font-size: 13px;
}

.cash-back a {
    color: var(--red);
}

.result-card {
    text-align: center;
}

.result-card .cash-list {
    margin-top: 18px;
    text-align: left;
}

.result-icon {
    width: 62px;
    height: 62px;
    margin: 4px auto 10px;
}

.result-desc {
    margin-top: 8px;
    font-size: 14px;
    color: #6b5b50;
    line-height: 1.7;
}

/* ---------- 小屏适配 ---------- */
@media (max-width: 360px) {
    .panel {
        margin-left: 3%;
        margin-right: 3%;
    }

    .btn-wechat {
        width: calc(100% - 40px);
    }
}