:root {
    --wx: #07c160;
    --wx-dark: #058f47;
    --wx-hover: #06ad56;
    --wx-light: #f0f9f4;
    --wx-border: #e1f3e9;
    --ink: #191919;
    --sub: #888;
    --line: #e5e7eb;
    --page: #f7f7f7;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    background: #e8e8e8;
    -webkit-font-smoothing: antialiased;
}
button, input { font-family: inherit; }
button { border: 0; background: none; padding: 0; cursor: pointer; }
img { max-width: 100%; }

.shell {
    width: 100%;
    max-width: 430px;
    height: 100vh;
    height: 100dvh;
    margin: 0 auto;
    background: var(--page);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
@media (min-width: 640px) {
    .shell {
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
        border-left: 1px solid #e5e5e5;
        border-right: 1px solid #e5e5e5;
    }
}

.view {
    display: none;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.view.is-on { display: flex; }

.splash {
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 1.5rem;
    min-height: 100%;
    text-align: center;
}
.splash-main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateY(-8%);
}
.splash-mark {
    width: 5.5rem;
    height: 5.5rem;
    margin: 0 auto 1.35rem;
    border-radius: 1.15rem;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wx);
    font-size: 2.15rem;
    line-height: 1;
}
.splash-mark i { line-height: 1; }
.splash h2 { margin: 0 0 .35rem; font-size: 1.2rem; font-weight: 700; }
.splash .lead { margin: 0 0 1.6rem; font-size: 13px; color: var(--sub); }
.splash-foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
    text-align: center;
}
.bar {
    width: 100%;
    max-width: 20rem;
    height: .375rem;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: .75rem;
}
.bar > span {
    display: block;
    height: 100%;
    width: 25%;
    background: var(--wx);
    transition: width .3s ease-out;
}
.splash .hint { margin: 0; font-size: .75rem; color: var(--sub); }
.ver-pill {
    font-size: 11px;
    color: var(--sub);
    background: rgba(229, 231, 235, .6);
    padding: .25rem .75rem;
    border-radius: .375rem;
}

.home {
    flex-direction: column;
    gap: .5rem;
    padding: .55rem .75rem calc(.5rem + env(safe-area-inset-bottom, 0px));
}
.home-foot {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding-top: 0;
}
.notice {
    background: var(--wx-light);
    border: 1px solid var(--wx-border);
    border-radius: .5rem;
    padding: .5rem .65rem;
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    font-size: 13px;
    line-height: 1.4;
    color: #374151;
}
.notice i { color: var(--wx); font-size: 14px; margin-top: 1px; }
.notice b { color: var(--wx-dark); }

.sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 .05rem;
    gap: .4rem;
}
.sec-head h2 { margin: 0; font-size: 16px; font-weight: 700; }
.sec-head span { font-size: 12px; color: var(--sub); flex-shrink: 0; }

.plans { display: flex; flex-direction: column; gap: .55rem; margin-top: .25rem; }
.plan {
    position: relative;
    padding: .7rem .72rem .62rem;
    border-radius: .75rem;
    border: 1px solid var(--line);
    background: #fff;
    cursor: pointer;
    touch-action: manipulation;
}
.plan:active { transform: scale(.995); }
.plan.is-on { border-color: var(--wx); box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 0 0 1px var(--wx); }
.plan.is-forever { margin-top: .3rem; }
.plan.is-forever.is-on {
    background: rgba(240, 249, 244, .45);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .08), 0 0 0 2px var(--wx);
}
.crown {
    position: absolute;
    top: -.6rem;
    right: .65rem;
    background: var(--wx);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: .12rem .48rem;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
    display: flex;
    align-items: center;
    gap: .2rem;
}
.plan-top {
    display: flex;
    align-items: center;
    gap: .45rem;
}
.dot {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-size: 10px;
}
.plan.is-on .dot { border-color: var(--wx); background: var(--wx); }
.pname { font-weight: 700; font-size: 15px; }
.badge {
    font-size: 11px;
    padding: .08rem .32rem;
    border-radius: .25rem;
    background: #f3f4f6;
    color: #4b5563;
    font-weight: 500;
}
.badge.is-hot {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    font-weight: 700;
}
.name-row { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; flex: 1; min-width: 0; }
.tagline { margin: .3rem 0 0 1.6rem; font-size: 13px; line-height: 1.4; color: #4b5563; }
.save { margin: .12rem 0 0 1.6rem; font-size: 12px; line-height: 1.35; color: var(--wx); font-weight: 600; }
.perks {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem .6rem;
    margin: .4rem 0 0 1.6rem;
    padding-top: .35rem;
    border-top: 1px solid rgba(229, 231, 235, .9);
    font-size: 12px;
    color: #374151;
}
.perks i { color: var(--wx); margin-right: .22rem; }
.price {
    color: var(--wx);
    font-weight: 800;
    font-size: 20px;
    line-height: 1;
    text-align: right;
    flex-shrink: 0;
}
.plan.is-forever .price { font-size: 22px; }
.price small { font-size: 12px; font-weight: 600; margin-right: 1px; }

.refund {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: .5rem;
    padding: .5rem .6rem;
    text-align: center;
    font-size: 13px;
    color: #374151;
}
.refund b { color: #ef4444; }

.notes {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: .5rem;
    padding: .55rem .65rem;
    font-size: 12px;
    color: var(--sub);
    line-height: 1.45;
    text-align: left;
}
.notes p { margin: 0; display: flex; gap: .25rem; }
.notes p + p { margin-top: .18rem; color: #1f2937; }
.notes b { color: var(--ink); }

.agree-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    font-size: 12px;
    color: #4b5563;
    padding-top: 0;
}
.agree-main { display: flex; align-items: center; gap: .35rem; }
.agree-row input { width: 1.05rem; height: 1.05rem; accent-color: var(--wx); margin: 0; }
.agree-links { display: flex; gap: .55rem; }
.agree-row button { color: var(--wx); font-weight: 600; text-decoration: underline; font-size: 12px; }

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.btn {
    min-height: 44px;
    border-radius: .7rem;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    color: #fff;
    touch-action: manipulation;
}
.btn:disabled { opacity: .6; }
.btn-pay { background: var(--wx); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.btn-pay:active { background: var(--wx-dark); }
.btn-job { background: #f97316; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.btn-job:active { background: #c2410c; }
.ver { text-align: center; font-size: 11px; color: var(--sub); line-height: 1.2; }

.part {
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem;
    background: #fff;
    min-height: 100%;
}
.part-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: .5rem;
    border-bottom: 1px solid #f3f4f6;
}
.back { font-size: .75rem; color: var(--sub); display: flex; align-items: center; gap: .25rem; }
.part-label { font-size: .75rem; font-weight: 700; color: #9ca3af; }
.part h1 { margin: .25rem 0 .5rem; text-align: center; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.block { margin-top: .625rem; }
.hrow { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.tick { width: .25rem; height: 1rem; background: #2563eb; border-radius: 999px; }
.hrow h2 { margin: 0; font-size: 1rem; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; font-size: .75rem; color: #374151; }
.chip { background: #dbeafe; color: #2563eb; font-weight: 700; font-size: 11px; padding: .125rem .5rem; border-radius: 999px; }
.muted { margin: .25rem 0 0; font-size: .75rem; color: #4b5563; }
.check-box {
    margin-top: .5rem;
    background: rgba(239, 246, 255, .7);
    border: 1px solid rgba(219, 234, 254, .8);
    border-radius: 1rem;
    padding: .875rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    font-size: .75rem;
    font-weight: 500;
}
.check-box i { color: var(--wx); margin-right: .5rem; }
.earn { font-size: .75rem; color: #374151; line-height: 1.625; }
.earn p { margin: .35rem 0; }
.earn b { color: #2563eb; font-size: .875rem; }
.earn-tip {
    background: rgba(239, 246, 255, .6);
    border: 1px solid rgba(219, 234, 254, .5);
    border-radius: .75rem;
    text-align: center;
    font-size: .75rem;
    font-weight: 500;
    padding: .625rem .75rem;
}
.steps { font-size: .75rem; color: #1f2937; }
.steps p { margin: .4rem 0; display: flex; gap: .375rem; }
.steps .n { color: #2563eb; font-weight: 700; }
.steps .ok { color: var(--wx-dark); }
.job-btn {
    width: 100%;
    margin-top: .5rem;
    padding: .875rem 1rem;
    font-size: 1rem;
    border-radius: .75rem;
    color: #fff;
    font-weight: 700;
    background: linear-gradient(to right, #ef4444, #f97316, #f97316);
    box-shadow: 0 10px 15px -3px rgba(249, 115, 22, .2);
}
.unlock {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    font-size: .75rem;
    color: #4b5563;
    padding-top: .25rem;
}
.unlock i { color: var(--wx); }

.sheet-back {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(0, 0, 0, .5);
    flex-direction: column;
    justify-content: flex-end;
}
.sheet-back.is-on { display: flex; }
@media (min-width: 640px) {
    .sheet-back { align-items: center; justify-content: center; padding: 1rem; }
}
.sheet {
    position: relative;
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    background: #fff;
    border-radius: 1rem 1rem 0 0;
    padding: 1.25rem;
    text-align: center;
    max-height: 92dvh;
    overflow-y: auto;
}
@media (min-width: 640px) { .sheet { border-radius: 1rem; } }
.warn-ico {
    width: 3rem;
    height: 3rem;
    margin: 0 auto;
    border-radius: 999px;
    background: #fffbeb;
    color: #f59e0b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}
.sheet h3 { margin: .5rem 0 .25rem; font-size: 1rem; }
.sheet .desc { margin: 0; font-size: .75rem; color: var(--sub); line-height: 1.625; }
.sheet-actions { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; }
.wx-link-box {
    margin-top: .75rem;
    padding: .75rem .85rem;
    border-radius: .75rem;
    background: #f5f5f5;
    border: 1px dashed #d1d5db;
    font-size: .75rem;
    color: #334155;
    line-height: 1.5;
    word-break: break-all;
    user-select: all;
    -webkit-user-select: all;
}
.pay-guide {
    margin-top: .75rem;
    padding: .75rem .85rem;
    border-radius: .75rem;
    background: #f0f9f4;
    border: 1px solid #e1f3e9;
    text-align: left;
}
.pay-guide p {
    margin: 0;
    font-size: .72rem;
    color: #475569;
    line-height: 1.7;
}
.pay-guide b {
    color: #058f47;
    font-weight: 700;
}
.btn-line {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    border-radius: .75rem;
    font-weight: 700;
    font-size: .75rem;
    box-sizing: border-box;
}
.btn-line.primary { background: var(--wx); color: #fff; }
.btn-line.ghost { background: #f3f4f6; color: #374151; }

.doc {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    background: #fff;
    border-radius: 1rem 1rem 0 0;
    max-height: 85dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-align: left;
}
@media (min-width: 640px) { .doc { border-radius: 1rem; } }
.doc-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1rem .5rem;
    border-bottom: 1px solid #f3f4f6;
}
.doc-head h3 { margin: 0; font-size: .875rem; padding-right: .5rem; }
.x {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    flex-shrink: 0;
}
.doc-tip {
    margin: .5rem 1rem 0;
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
    border-radius: .5rem;
    font-size: 11px;
    padding: .375rem .75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.doc-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: .75rem 1rem;
    font-size: .75rem;
    color: #374151;
    line-height: 1.625;
    white-space: pre-wrap;
}
.doc-foot {
    padding: .5rem 1rem 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #f3f4f6;
}
.doc-foot button {
    width: 100%;
    padding: .625rem;
    border-radius: .5rem;
    font-weight: 700;
    font-size: .75rem;
    background: var(--wx);
    color: #fff;
}
.doc-foot button:disabled { background: #d1d5db; color: #6b7280; }

.qr-card { position: relative; }
.qr-box {
    width: 16rem;
    height: 16rem;
    margin: .75rem auto 0;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .75rem;
    box-sizing: border-box;
}
.qr-box img,
.qr-box .pay-qr-img {
    width: 14rem !important;
    height: 14rem !important;
    object-fit: contain;
    image-rendering: pixelated;
    background: #fff;
}
.qr-box table { display: none !important; }
.qr-empty { font-size: .75rem; color: var(--sub); padding: .5rem; }

.toast {
    position: fixed;
    left: 50%;
    bottom: 18%;
    transform: translateX(-50%);
    background: rgba(25, 25, 25, .88);
    color: #fff;
    font-size: .75rem;
    padding: .5rem .85rem;
    border-radius: .5rem;
    z-index: 120;
    display: none;
    max-width: 80%;
    text-align: center;
}
.toast.is-on { display: block; }