*{margin:0;padding:0;box-sizing:border-box;}
body{
    font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",Arial,sans-serif;
    /* 分红渐变黑色背景 */
    background:linear-gradient(135deg,#ff88b7 0%,#2b0b19 35%,#050208 100%);
    color:#fff;
    max-width:780px;
    margin:0 auto;
    padding:0 14px 70px;
}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}

.page{
    min-height:100vh;
}

/* 头部区域（宽度跟下面内容一致） */
.header{
    padding:14px 0 10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.logo-wrap{
    display:flex;
    align-items:center;
    gap:10px;
}
.logo-mark{
    /* 改成正方形 + 圆角，防止 LOGO 变形 */
    width:52px;
    height:52px;
    border-radius:12px;
    background:radial-gradient(circle at 30% 0,#ffd4ea 0,#ff4f8b 40%,#f21e5d 70%,#3b071b 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.logo-mark img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.logo-mark-fallback{
    font-size:24px;
    font-weight:700;
}
/* 头部 LOGO 图片标签和路径：images/tqlogo.webp 或自行替换为 SVG */
/* 示例：<img src="images/tqlogo.webp"> */

.logo-text-main{
    font-size:22px;
    font-weight:700;
}
.logo-text-sub{
    font-size:13px;
    opacity:.75;
}

/* 头部下面的内容宽度统一（去掉左右负 margin） */
.hero{
    margin:8px 0 0;
    padding:14px;
    background:radial-gradient(circle at 0 0,#ff88b7 0,rgba(255,86,142,.2) 40%,rgba(0,0,0,0) 100%);
    border-bottom:1px solid rgba(255,255,255,.06);
}
.hero-title{
    font-size:19px;
    font-weight:700;
    margin-bottom:6px;
}
.hero-desc{
    font-size:13px;
    opacity:.86;
    line-height:1.6;
}
.hero-badges{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:10px;
}
.hero-badge{
    font-size:11px;
    padding:4px 9px;
    border-radius:999px;
    background:rgba(0,0,0,.35);
    border:1px solid rgba(255,255,255,.14);
}

/* 面包屑同样使用内容宽度（去掉负 margin） */
.breadcrumb{
    font-size:11px;
    margin:0 0 12px;
    padding:6px 14px 8px;
    background:linear-gradient(135deg,rgba(255,136,183,.35),rgba(19,18,24,.98));
    border-radius:0 0 14px 14px;
    border-bottom:1px solid rgba(255,255,255,.06);
    display:flex;
    align-items:center;
    gap:4px;
}
.breadcrumb a{
    color:#ffe3f2;
    text-decoration:none;
    position:relative;
    transition:color .2s ease,transform .2s ease;
    padding:0 1px;
}
.breadcrumb a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-2px;
    width:0;
    height:1px;
    background:rgba(255,227,242,.9);
    transition:width .2s ease;
}
.breadcrumb a:hover{
    color:#ffffff;
    transform:translateY(-1px);
}
.breadcrumb a:hover::after{
    width:100%;
}
.crumb-sep{
    opacity:.75;
}

.card{
    background:rgba(17,16,22,.96);
    border-radius:14px;
    padding:14px 12px;
    margin-top:10px;
    box-shadow:0 10px 30px rgba(0,0,0,.35);
    border:1px solid rgba(255,255,255,.06);
}

.card-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
}
.card-title{
    font-size:15px;
    font-weight:700;
}
.card-sub{
    font-size:11px;
    opacity:.7;
}

.input-row{
    margin-bottom:10px;
}
.input-label{
    font-size:12px;
    margin-bottom:6px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.input-label span:last-child{
    font-size:11px;
    opacity:.7;
}
.input{
    width:100%;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.18);
    padding:10px 11px;
    background:rgba(5,5,8,.9);
    color:#fff;
    font-size:13px;
    outline:none;
    transition:all .22s ease;
}
.input:focus{
    border-color:#ff4f8b;
    box-shadow:0 0 0 1px rgba(255,79,139,.55);
}

.ratio-box{
    font-size:11px;
    padding:7px 9px;
    border-radius:10px;
    background:linear-gradient(120deg,rgba(255,111,157,.15),rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.12);
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:4px;
}

.package-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
}
@media (min-width:600px){
    .package-grid{
        grid-template-columns:repeat(4,1fr);
    }
}
.pkg-item{
    position:relative;
    border-radius:12px;
    padding:9px 8px 10px;
    background:radial-gradient(circle at 0 0,#2d1b24 0,#17151b 48%,#131218 100%);
    border:1px solid rgba(255,255,255,.08);
    cursor:pointer;
    transition:all .25s ease;
    overflow:hidden;
}
.pkg-item:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 20px rgba(0,0,0,.7);
    border-color:rgba(255,133,186,.8);
}
.pkg-item.active{
    background:linear-gradient(145deg,#ff4f8b 0,#ff7aa8 40%,#271021 100%);
    border-color:rgba(255,255,255,.88);
    box-shadow:0 0 0 1px rgba(255,255,255,.6),0 10px 24px rgba(0,0,0,.85);
}
.pkg-amount{
    font-size:14px;
    font-weight:700;
}
.pkg-coins{
    font-size:11px;
    margin-top:2px;
    opacity:.92;
}
.pkg-gift{
    font-size:11px;
    margin-top:2px;
    color:#ffdfe9;
}
.pkg-tag{
    position:absolute;
    top:6px;
    right:-26px;
    transform:rotate(36deg);
    background:linear-gradient(120deg,#ffe3f2,#ff8eba);
    color:#681634;
    font-size:10px;
    padding:2px 28px;
    box-shadow:0 3px 10px rgba(0,0,0,.4);
    pointer-events:none;
}
.pkg-tag.hot{
    background:linear-gradient(120deg,#ffe89f,#ff9f43);
    color:#4b2600;
}

.coupon-section-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:8px;
}
.coupon-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    font-size:12px;
    padding:6px 11px;
    border-radius:999px;
    border:none;
    outline:none;
    cursor:pointer;
    background:linear-gradient(120deg,#ff4f8b,#ff7aa8);
    color:#fff;
    box-shadow:0 6px 16px rgba(255,90,143,.55);
    transition:all .22s ease;
}
.coupon-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 9px 22px rgba(255,90,143,.75);
}
.coupon-btn:active{
    transform:scale(.96) translateY(0);
    box-shadow:0 4px 10px rgba(0,0,0,.7);
}
.coupon-btn.disabled{
    opacity:.6;
    box-shadow:none;
    cursor:default;
}

.coupon-hint{
    font-size:11px;
    opacity:.8;
}

.coupon-list{
    margin-top:6px;
    display:flex;
    flex-wrap:wrap;
    gap:7px;
}
.coupon-tag{
    font-size:11px;
    padding:4px 8px;
    border-radius:999px;
    border:1px dashed rgba(255,255,255,.26);
    background:rgba(0,0,0,.35);
    display:flex;
    align-items:center;
    gap:4px;
    opacity:.35;
    transition:all .22s ease;
}
.coupon-tag span{
    opacity:.9;
}
.coupon-tag.active{
    opacity:1;
    border-style:solid;
    border-color:#ff8eba;
    background:rgba(255,90,143,.18);
}
.coupon-tag.available{
    opacity:.85;
}
.coupon-tag-best::after{
    content:"优先推荐";
    font-size:10px;
    padding:2px 6px;
    border-radius:8px;
    background:linear-gradient(120deg,#ffe89f,#ffb443);
    color:#4b2600;
}

#couponSection .coupon-hint,
#couponSection .coupon-list{
    display:none;
}
#couponSection.open-coupons .coupon-hint,
#couponSection.open-coupons .coupon-list{
    display:block;
}

.pay-grid{
    display:flex;
    gap:10px;
    justify-content:flex-start;
}
.pay-item{
    flex:0 0 35%;
    border-radius:11px;
    padding:9px 8px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(5,5,10,.9);
    display:flex;
    align-items:center;
    justify-content:space-between;
    cursor:pointer;
    transition:all .22s ease;
}
.pay-item:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 18px rgba(0,0,0,.7);
    border-color:rgba(255,255,255,.4);
}
.pay-item.active{
    border-color:#ff4f8b;
    background:radial-gradient(circle at 0 0,rgba(255,111,157,.3),rgba(5,5,10,1));
    box-shadow:0 0 0 1px rgba(255,79,139,.65),0 8px 20px rgba(0,0,0,.8);
}
.pay-label{
    font-size:13px;
    display:flex;
    align-items:center;
    gap:6px;
}
.pay-icon{
    width:18px;
    height:18px;
    border-radius:4px;
    overflow:hidden;
    background:#0a0a0a;
    flex-shrink:0;
}
.pay-icon img{
    width:100%;
    height:100%;
    object-fit:contain;
}
/* 微信图标路径预留：images/wx.png */
/* 支付宝图标路径预留：images/zfb.png */

.pay-tag-wechat{
    font-size:11px;
    padding:2px 7px;
    border-radius:999px;
    background:rgba(21,201,93,.12);
    color:#3ae683;
    border:1px solid rgba(21,201,93,.35);
}
.pay-tag-alipay{
    font-size:11px;
    padding:2px 7px;
    border-radius:999px;
    background:rgba(40,119,255,.12);
    color:#6ea7ff;
    border:1px solid rgba(40,119,255,.35);
}

.order-summary{
    margin-top:8px;
    font-size:12px;
    border-radius:10px;
    background:rgba(0,0,0,.42);
    border:1px solid rgba(255,255,255,.08);
    padding:9px 9px 8px;
    line-height:1.6;
}
.order-line{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.order-line strong{
    font-size:13px;
}
.order-line span{
    font-size:12px;
}
.order-highlight{
    color:#ffb9d6;
}
.order-discount{
    color:#ffe89f;
}
.order-line-coupon span:last-child{
    display:flex;
    align-items:center;
    gap:6px;
}
.change-coupon-btn{
    padding:2px 6px;
    font-size:10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.32);
    background:transparent;
    color:#ffe3f2;
    cursor:pointer;
    transition:all .2s ease;
    white-space:nowrap;
}
.change-coupon-btn:hover{
    background:rgba(255,255,255,.08);
}

.submit-wrap{
    margin-top:14px;
}
.submit-btn{
    width:100%;
    border:none;
    outline:none;
    border-radius:999px;
    padding:11px 0;
    font-size:15px;
    font-weight:700;
    letter-spacing:.05em;
    cursor:pointer;
    background:linear-gradient(120deg,#ff4f8b,#ff7aa8);
    color:#fff;
    box-shadow:0 10px 26px rgba(255,79,139,.75);
    transition:all .22s ease;
}
.submit-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 13px 30px rgba(255,79,139,.95);
}
.submit-btn:active{
    transform:scale(.97);
    box-shadow:0 5px 16px rgba(0,0,0,.8);
}
.submit-btn.disabled{
    opacity:.5;
    cursor:not-allowed;
    box-shadow:none;
}

.tips{
    margin-top:10px;
    font-size:11px;
    opacity:.78;
    line-height:1.7;
}
.tips strong{
    font-weight:600;
}

.faq{
    margin-top:14px;
}
.faq-title{
    font-size:14px;
    font-weight:700;
    margin-bottom:8px;
}
.faq-item{
    border-radius:10px;
    background:rgba(0,0,0,.32);
    border:1px solid rgba(255,255,255,.08);
    margin-bottom:8px;
    overflow:hidden;
}
.faq-q{
    padding:9px 10px;
    font-size:12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    cursor:pointer;
}
.faq-q span{
    flex:1;
    padding-right:10px;
}
.faq-arrow{
    font-size:16px;
    transition:transform .22s ease;
    opacity:.8;
}
.faq-item.open .faq-arrow{
    transform:rotate(90deg);
}
.faq-a{
    padding:0 10px 9px;
    font-size:11px;
    line-height:1.7;
    display:none;
    opacity:.9;
}
.faq-item.open .faq-a{
    display:block;
}

.footer{
    margin:18px 0 0;
    padding:10px 0 12px;
    font-size:10px;
    opacity:.6;
    border-top:1px solid rgba(255,255,255,.08);
    line-height:1.7;
}

.modal-mask{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    display:none;
    align-items:flex-end;
    justify-content:center;
    z-index:999;
}
@media(min-width:600px){
    .modal-mask{
        align-items:center;
    }
}
.modal{
    width:100%;
    max-width:420px;
    background:#14131a;
    border-radius:14px 14px 0 0;
    border-top:1px solid rgba(255,255,255,.12);
    box-shadow:0 -10px 28px rgba(0,0,0,.8);
    padding:14px 14px 12px;
}
@media(min-width:600px){
    .modal{
        border-radius:14px;
        border:1px solid rgba(255,255,255,.16);
        box-shadow:0 16px 40px rgba(0,0,0,.9);
    }
}
.modal-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:8px;
}
.modal-title{
    font-size:15px;
    font-weight:700;
}
.modal-close{
    cursor:pointer;
    font-size:18px;
    opacity:.8;
    transition:transform .2s ease,opacity .2s ease;
}
.modal-close:hover{
    transform:scale(1.05);
    opacity:1;
}
.modal-body{
    font-size:12px;
    line-height:1.7;
}
.modal-body p{
    margin-bottom:5px;
}
.modal-highlight{
    color:#ffb9d6;
}
.modal-footer{
    margin-top:10px;
    display:flex;
    gap:10px;
}
.modal-btn{
    flex:1;
    padding:9px 0;
    border-radius:999px;
    border:none;
    outline:none;
    font-size:13px;
    cursor:pointer;
    transition:all .22s ease;
}
.modal-btn-cancel{
    background:rgba(0,0,0,.2);
    color:#fff;
    border:1px solid rgba(255,255,255,.16);
}
.modal-btn-cancel:hover{
    background:rgba(255,255,255,.05);
}
.modal-btn-confirm{
    background:linear-gradient(120deg,#ff4f8b,#ff7aa8);
    color:#fff;
    box-shadow:0 8px 22px rgba(255,79,139,.9);
}
.modal-btn-confirm:hover{
    transform:translateY(-1px);
    box-shadow:0 11px 26px rgba(255,79,139,1);
}
.modal-btn-confirm:active{
    transform:scale(.97);
    box-shadow:0 6px 18px rgba(0,0,0,.8);
}

@media(max-width:420px){
    body{
        padding:0 10px 70px;
    }
    .hero{
        padding-inline:10px;
    }
    .card{
        padding:12px 10px;
    }
}