*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
    font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",Arial,sans-serif;
    background:linear-gradient(90deg,#000000 0,#ff2442 50%,#000000 100%);
    color:#f5f5f7;
    -webkit-font-smoothing:antialiased;
}
:root{
    --brand:#ff2442;
    --brand-strong:#ff0036;
    --brand-soft:#ff6a80;
    --bg:#050509;
    --card:#10131c;
    --card-soft:#171a24;
    --border:#262a3a;
    --text-sub:#8a90a7;
    --success:#18c96e;
    --radius-lg:18px;
    --shadow-soft:0 16px 40px rgba(0,0,0,.55);
    --transition:all .22s ease-out;
}
.page{
    min-height:100vh;
    max-width:640px;
    margin:0 auto;
    padding:0 10px 40px;
}
@media (min-width:768px){
    .page{padding:6px 14px 52px}
}
.top-bar{
    height:0;
    background:linear-gradient(90deg,#000000 0,#161616 35%,#000000 100%);
}
.top-nav-wrap{
    position:relative;
    margin-top:0;
}
.top-nav-inner{
    max-width:640px;
    margin:0 auto;
    height:40px;
    border-radius:0 0 12px 12px;
    background:linear-gradient(90deg,#000000 0,#ff2442 50%,#000000 100%);
    box-shadow:0 14px 28px rgba(0,0,0,.7);
    display:flex;
    align-items:stretch;
    overflow:hidden;
}
.top-nav-left,
.top-nav-right{
    display:flex;
    align-items:stretch;
}
.top-nav-left{
    background:linear-gradient(90deg,#151013 0,rgba(0,0,0,.1) 60%,transparent 100%);
}
.nav-item{
    padding:0 16px;
    font-size:13px;
    color:#ffecec;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    position:relative;
    transition:var(--transition);
    white-space:nowrap;
    text-decoration:none;
}
.nav-item span{
    position:relative;
    z-index:1;
}
.nav-item::after{
    content:"";
    position:absolute;
    inset:0;
    background:transparent;
    border-radius:999px;
    transition:var(--transition);
}
.nav-item.active{
    color:#ffec7a;
    font-weight:600;
}
.nav-item.active::after{
    background:radial-gradient(circle at 50% 130%,rgba(0,0,0,.6),transparent 70%);
}
.nav-item:hover:not(.active){
    color:#ffffff;
    transform:translateY(-1px);
}
.nav-item:hover::after{
    background:radial-gradient(circle at 50% 120%,rgba(0,0,0,.5),transparent 70%);
}
.top-nav-right{
    margin-left:auto;
}
header.header{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:18px 12px 10px;
    margin-top:16px;
    background:transparent;
    box-shadow:none;
    border-radius:0;
}
.logo-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    text-align:center;
}
.logo-wrap img{
    width:48px;
    height:48px;
    border-radius:14px;
    background:#000;
    object-fit:cover;
}
.logo-text-main{
    font-size:23px;
    font-weight:600;
}
.logo-text-sub{
    font-size:13px;
    color:rgba(255,255,255,.8);
    margin-top:2px;
}
.header-right{
    display:none;
}
.order-bar{
    margin-top:10px;
    border-radius:14px;
    background:linear-gradient(90deg,rgba(0,0,0,.85) 0,#31101a 45%,rgba(0,0,0,.9) 100%);
    border:1px solid rgba(255,255,255,.06);
    padding:6px 10px;
    display:flex;
    align-items:center;
    gap:8px;
    box-shadow:0 10px 26px rgba(0,0,0,.65);
}
.order-bar-label{
    font-size:11px;
    color:#ffd76d;
    display:flex;
    align-items:center;
    gap:4px;
    white-space:nowrap;
}
.order-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#ffd54f;
}
.order-bar-main{
    overflow:hidden;
    flex:1;
}
.order-ticker{
    font-size:12px;
    color:#f7f7ff;
    white-space:nowrap;
    transform:translateY(0);
    transition:transform .35s ease-out;
}
.order-ticker.fade-out{
    opacity:0;
    transition:opacity .2s ease-out;
}
.order-ticker.fade-in{
    opacity:1;
    transition:opacity .2s ease-in;
}
.section{
    background:var(--card);
    border-radius:var(--radius-lg);
    padding:14px 12px;
    margin-top:12px;
    border:1px solid var(--border);
    box-shadow:0 10px 30px rgba(0,0,0,.6);
}
@media (min-width:768px){
    .section{padding:18px 16px;margin-top:16px}
}
.section-header{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-bottom:10px;
}
.section-icon{
    width:26px;
    height:26px;
    border-radius:10px;
    background:radial-gradient(circle at 30% 0,#ffffff 0,#ffffff 12%,#ff2442 40%,#ff0091 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    font-size:15px;
    color:#fff;
}
.icon-pkg{
    background:radial-gradient(circle at 10% 0,#ffffff 0,#ffffff 10%,#ff4b6e 40%,#ffb300 100%);
}
.icon-coupon{
    background:radial-gradient(circle at 20% 0,#ffffff 0,#ffffff 12%,#30d158 40%,#0fb4ff 100%);
}
.icon-pay{
    background:radial-gradient(circle at 30% 0,#ffffff 0,#ffffff 12%,#00e676 40%,#00b0ff 100%);
}
.icon-info{
    background:radial-gradient(circle at 30% 0,#ffffff 0,#ffffff 12%,#7c4dff 40%,#ff4081 100%);
}
.section-title-wrap{
    display:flex;
    flex-direction:column;
    gap:2px;
}
.section-title{
    font-size:15px;
    font-weight:600;
    color:#ffffff;
}
.section-sub{
    font-size:11px;
    color:var(--text-sub);
}
.section-divider{
    margin:14px 0;
    border-top:1px dashed #2a2f45;
}
.account-row{
    display:flex;
    flex-direction:column;
    gap:6px;
}
.account-label{
    font-size:13px;
    color:#e7e8ff;
}
.account-input{
    width:100%;
    padding:10px 11px;
    border-radius:12px;
    border:1px solid var(--border);
    outline:none;
    background:var(--card-soft);
    color:#f5f5f7;
    font-size:13px;
    transition:var(--transition);
}
.account-input::placeholder{
    color:#707694;
}
.account-input:focus{
    border-color:var(--brand-soft);
    box-shadow:0 0 0 1px rgba(255,36,66,.45);
    background:#171b27;
}
.pkg-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:8px;
}
@media (min-width:640px){
    .pkg-grid{grid-template-columns:repeat(3,1fr)}
}
.pkg-card{
    position:relative;
    padding:16px 10px 10px;
    border-radius:14px;
    background:var(--card-soft);
    border:1px solid var(--border);
    cursor:pointer;
    transition:var(--transition);
    overflow:hidden;
}
.pkg-card:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-soft);
    border-color:rgba(255,36,66,.75);
    background:#181c28;
}
.pkg-card.active{
    border-color:var(--brand);
    box-shadow:0 0 0 1px rgba(255,36,66,.8),0 18px 40px rgba(0,0,0,.9);
    background:linear-gradient(145deg,#1f2232,#181320);
}
.pkg-label{
    position:absolute;
    top:7px;
    right:7px;
    padding:2px 8px;
    border-radius:999px;
    font-size:10px;
    background:linear-gradient(135deg,#ffb74d,#ff7043);
    color:#2b0a05;
    box-shadow:0 6px 14px rgba(255,112,67,.6);
    white-space:nowrap;
}
.pkg-label.second{
    background:linear-gradient(135deg,#ff8a80,#ff1744);
    color:#fff;
    box-shadow:0 6px 14px rgba(255,23,68,.7);
}
.pkg-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:4px;
    margin-top:4px;
}
.pkg-middle{
    font-size:18px;
    font-weight:600;
    color:#ffffff;
    margin-bottom:3px;
}
.pkg-price{
    font-size:11px;
    font-weight:500;
    color:#b0b6d0;
}
.pkg-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:11px;
    color:#8f94ad;
}
.pkg-hot{
    font-size:10px;
    padding:2px 6px;
    border-radius:999px;
    background:rgba(255,36,66,.16);
    color:#ffb3c4;
}
.coupon-toggle-wrap{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.coupon-toggle-btn{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:6px 11px;
    border-radius:999px;
    border:1px solid var(--border);
    background:#181b26;
    font-size:12px;
    color:#f5f5ff;
    cursor:pointer;
    transition:var(--transition);
}
.coupon-toggle-btn:hover{
    border-color:rgba(255,36,66,.8);
    box-shadow:0 8px 18px rgba(0,0,0,.8);
    transform:translateY(-1px);
}
.coupon-toggle-arrow{
    width:10px;
    height:10px;
    border-left:1.5px solid #9ca2c1;
    border-bottom:1.5px solid #9ca2c1;
    transform:rotate(-45deg);
    transition:var(--transition);
    margin-top:-1px;
}
.coupon-toggle-btn.open .coupon-toggle-arrow{
    transform:rotate(135deg);
    margin-top:1px;
}
.coupon-intro{
    font-size:11px;
    color:var(--text-sub);
    text-align:right;
}
.coupon-panel{
    margin-top:10px;
    display:none;
}
.coupon-list{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}
.coupon-item{
    flex:1 1 calc(50% - 6px);
    min-width:0;
    border-radius:12px;
    border:1px dashed #3b4056;
    background:#181b27;
    padding:7px 8px;
    display:flex;
    flex-direction:column;
    gap:2px;
    cursor:pointer;
    transition:var(--transition);
}
@media (min-width:640px){
    .coupon-item{flex:1 1 calc(25% - 6px)}
}
.coupon-main{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.coupon-money{
    font-size:15px;
    font-weight:600;
    color:#ffdf88;
}
.coupon-cond{
    font-size:11px;
    color:#c2c6e0;
}
.coupon-tag{
    font-size:10px;
    color:#f8bfb3;
}
.coupon-item:hover{
    transform:translateY(-2px);
    border-color:rgba(255,219,112,.8);
    box-shadow:var(--shadow-soft);
    background:#1f2230;
}
.coupon-item.active{
    border-style:solid;
    border-color:#ffdf88;
    background:linear-gradient(145deg,#2a2030,#3a2a1c);
}
.coupon-item.disabled{
    opacity:.4;
    border-style:dashed;
    cursor:not-allowed;
    box-shadow:none;
    transform:none;
}
.coupon-tip{
    margin-top:6px;
    font-size:11px;
    color:var(--text-sub);
}
.pay-list{
    display:flex;
    gap:16px;
}
.pay-item{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:11px 10px;
    border-radius:999px;
    border:1px solid var(--border);
    background:#181b26;
    color:#e8e9ff;
    font-size:13px;
    cursor:pointer;
    transition:var(--transition);
}
.pay-icon{
    width:18px;
    height:18px;
    border-radius:30%;
    overflow:hidden;
    background:#ffffff;
}
.pay-icon img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}
.pay-item:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 24px rgba(0,0,0,.8);
    border-color:rgba(255,36,66,.65);
}
.pay-item.active{
    background:linear-gradient(135deg,#261420,#1b2432);
    border-color:var(--brand);
    box-shadow:0 10px 26px rgba(0,0,0,.9);
}
.summary-box{
    background:#141824;
    border-radius:14px;
    padding:10px 10px 8px;
    border:1px solid #30344a;
    display:flex;
    flex-direction:column;
    gap:4px;
    font-size:12px;
    color:#c4c8e0;
}
.summary-box.hidden{
    display:none;
}
.summary-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.summary-row strong{
    color:#ffffff;
    font-weight:600;
}
.summary-highlight{
    color:#ffdf88;
    font-weight:600;
}
.summary-discount{
    color:#ffb3c4;
    font-weight:500;
}
.summary-actions{
    margin-top:4px;
    display:flex;
    justify-content:flex-end;
}
.summary-change-btn{
    border-radius:999px;
    border:1px solid #3a3f5a;
    background:transparent;
    padding:3px 9px;
    font-size:11px;
    color:#d2d5f0;
    cursor:pointer;
    transition:var(--transition);
}
.summary-change-btn:hover{
    border-color:var(--brand-soft);
    color:#ffffff;
    background:#1b1f30;
}
.submit-section-inner{
    margin-top:8px;
}
.submit-btn{
    width:100%;
    padding:12px 10px;
    border-radius:999px;
    border:none;
    outline:none;
    font-size:16px;
    font-weight:600;
    color:#fff;
    cursor:pointer;
    background:linear-gradient(135deg,#ff2442,#ff6a80);
    box-shadow:0 20px 46px rgba(255,36,66,.7);
    transition:var(--transition);
}
.submit-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 22px 52px rgba(255,36,66,.9);
}
.submit-btn:active{
    transform:translateY(0);
    box-shadow:0 12px 26px rgba(255,36,66,.8);
}
.risk-tip{
    margin-top:7px;
    font-size:11px;
    color:var(--text-sub);
    line-height:1.6;
}
.info-text{
    font-size:12px;
    line-height:1.7;
    color:#c4c8e0;
    display:none;
}
.info-title{
    font-size:13px;
    font-weight:600;
    margin-bottom:6px;
    color:#ffffff;
    cursor:pointer;
}
.info-title:hover{
    color:#ffdf88;
}
.faq-item{
    margin-top:6px;
    padding:8px 0;
    border-bottom:1px solid #262a3c;
    cursor:pointer;
}
.faq-q{
    font-size:12px;
    color:#f5f5ff;
}
.faq-a{
    font-size:12px;
    color:#b2b6cf;
    margin-top:4px;
    line-height:1.7;
    display:none;
}
.page-footer{
    max-width:640px;
    margin:12px auto 0;
    font-size:11px;
    color:#d0d3eb;
    padding:12px 10px 16px;
    border-top:1px solid #262a3c;
}
.page-footer-line{
    display:flex;
    justify-content:space-between;
    margin-bottom:4px;
}
.page-footer-line span:last-child{
    color:#f0f1ff;
}
.page-footer-small{
    font-size:10px;
    color:#a9adc8;
}
.page-corner{
    position:fixed;
    right:0;
    bottom:0;
    width:68px;
    height:68px;
    background:linear-gradient(135deg,#ff2442,#ff6a80);
    clip-path:polygon(100% 0,0 100%,100% 100%);
    opacity:.92;
    pointer-events:none;
}
.loading-mask{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.72);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:900;
}
.loading-inner{
    background:#10131c;
    border-radius:16px;
    padding:14px 18px;
    border:1px solid #262a3a;
    box-shadow:0 20px 50px rgba(0,0,0,.9);
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    color:#f5f5ff;
}
.loading-spinner{
    width:20px;
    height:20px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.25);
    border-top-color:#ff2442;
    animation:spin .7s linear infinite;
}
@keyframes spin{
    to{transform:rotate(360deg);}
}
.modal-mask{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.78);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:950;
}
.modal-card{
    background:#10131c;
    border-radius:18px;
    border:1px solid #262a3a;
    box-shadow:0 22px 60px rgba(0,0,0,.9);
    max-width:350px;
    width:86%;
    padding:14px 14px 12px;
    color:#f5f5ff;
}
.modal-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:8px;
}
.modal-title{
    font-size:14px;
    font-weight:600;
}
.modal-close{
    font-size:12px;
    color:#a9adc8;
    cursor:pointer;
    padding:4px 8px;
    border-radius:999px;
    border:1px solid #34384e;
    background:rgba(15,17,28,.8);
}
.modal-close:hover{
    border-color:var(--brand-soft);
    color:#ffffff;
}
.modal-body{
    font-size:12px;
    color:#c4c8e0;
    padding-top:4px;
}
.modal-body-center{
    text-align:center;
}
.modal-footer{
    margin-top:10px;
    display:flex;
    justify-content:flex-end;
    gap:8px;
}
.modal-btn{
    min-width:72px;
    padding:6px 10px;
    border-radius:999px;
    font-size:12px;
    border:1px solid #34384e;
    background:#181b26;
    color:#e8e9ff;
    cursor:pointer;
    transition:var(--transition);
}
.modal-btn-primary{
    border-color:var(--brand);
    background:linear-gradient(135deg,#ff2442,#ff6a80);
    color:#fff;
    box-shadow:0 10px 28px rgba(255,36,66,.7);
}
.modal-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 24px rgba(0,0,0,.85);
}
.modal-btn:active{
    transform:translateY(0);
    box-shadow:0 6px 16px rgba(0,0,0,.7);
}
.modal-qr-box{
    margin-top:8px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
}
.modal-qr-code{
    width:220px;
    height:220px;
    background:#fff;
    border-radius:12px;
    padding:10px;
}
.modal-tip{
    font-size:11px;
    color:#a9adc8;
}
.modal-success-icon{
    width:44px;
    height:44px;
    border-radius:50%;
    border:2px solid rgba(24,201,110,.4);
    display:flex;
    align-items:center;
    justify-content:center;
    margin:4px auto 6px;
    background:rgba(24,201,110,.08);
    color:var(--success);
    font-size:22px;
}
.modal-success-text-main{
    font-size:15px;
    font-weight:600;
    text-align:center;
    margin-bottom:4px;
}
.modal-success-text-sub{
    font-size:12px;
    text-align:center;
    color:#c4c8e0;
}
.modal-html-card{
    max-width:350px;
    width:350px;
}
.modal-html-iframe{
    width:350px;
    height:350px;
    border-radius:12px;
    border:none;
    background:#fff;
    margin-top:8px;
}
.toast{
    position:fixed;
    left:50%;
    bottom:70px;
    transform:translateX(-50%);
    background:rgba(15,18,28,.96);
    color:#f5f5ff;
    padding:8px 12px;
    border-radius:999px;
    font-size:12px;
    border:1px solid #ff2442;
    box-shadow:0 8px 25px rgba(0,0,0,.9);
    z-index:1000;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease-out,transform .25s ease-out;
}
.toast.show{
    opacity:1;
    transform:translate(-50%,-4px);
}