:root{
    --bx-primary:#3b6cff;
    --bx-primary-dark:#2744b8;
    --bx-secondary:#7aa5ff;
    --bx-bg:#050914;
    --bx-card-bg:#0b1020;
    --bx-border:#1a2440;
    --bx-text:#f7f9ff;
    --bx-muted:#8f9ac0;
    --bx-success:#13c27a;
    --bx-danger:#ff4d4f;
    --radius-lg:16px;
    --radius-md:12px;
    --shadow-soft:0 10px 26px rgba(0,0,0,.45);
    --shadow-light:0 4px 14px rgba(0,0,0,.35);
    --trans-fast:all .18s ease-out;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
    font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Arial,sans-serif;
    background:radial-gradient(circle at top,#122351 0%,#050914 55%,#020309 100%);
    color:var(--bx-text);
    max-width:560px;
    margin:0 auto;
    padding:0 10px 80px;
}
a{text-decoration:none;color:inherit;}

.btn,
.pkg-card,
.coupon-item,
.pay-item,
.btn-coupon-toggle,
.footer-link,
.faq-q-row,
.logo-link{
    cursor:pointer;
    transition:var(--trans-fast);
}
.btn:hover,
.pkg-card:hover,
.coupon-item:hover,
.pay-item:hover,
.btn-coupon-toggle:hover,
.footer-link:hover,
.faq-q-row:hover,
.logo-link:hover{
    transform:translateY(-1px);
    box-shadow:var(--shadow-light);
}
.btn:active,
.pkg-card:active,
.coupon-item:active,
.pay-item:active,
.btn-coupon-toggle:active,
.footer-link:active,
.faq-q-row:active,
.logo-link:active{
    transform:scale(.97);
    box-shadow:none;
}

header{
    margin:12px 0 8px;
}
.top-bar{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
}
.logo-area{
    display:flex;
    align-items:center;
}
.logo-link{
    display:flex;
    align-items:center;
    gap:10px;
    color:inherit;
}
.logo-wrap{
    width:40px;
    height:40px;
    position:relative;
    border-radius:8px;
    overflow:hidden;
}
.logo-img{
    width:100%;
    height:100%;
    border-radius:8px;
    display:block;
    object-fit:cover;
}
.brand-text{
    display:flex;
    flex-direction:column;
    gap:2px;
}
.brand-text h1{
    font-size:18px;
    font-weight:700;
}
.brand-text p{
    font-size:12px;
    color:var(--bx-muted);
}

.hero-card{
    margin-top:10px;
    background:linear-gradient(135deg,#111a3a 0%,#0b1022 45%,#111a3a 100%);
    border-radius:var(--radius-lg);
    padding:12px 12px 10px;
    box-shadow:var(--shadow-soft);
    border:1px solid rgba(112,140,255,.35);
}
.hero-title{
    font-size:15px;
    font-weight:700;
    margin-bottom:4px;
}
.hero-sub{
    font-size:12px;
    color:var(--bx-muted);
    line-height:1.5;
}
.hero-badges{
    display:flex;
    gap:6px;
    margin-top:8px;
    flex-wrap:wrap;
}
.hero-badge{
    font-size:11px;
    padding:3px 8px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.16);
    color:var(--bx-muted);
    background:rgba(4,15,42,.7);
}

main{
    margin-top:14px;
}

.section-card{
    background:var(--bx-card-bg);
    border-radius:var(--radius-lg);
    padding:12px 12px 14px;
    border:1px solid var(--bx-border);
    box-shadow:var(--shadow-light);
}
.section-title{
    font-size:14px;
    font-weight:700;
    margin-bottom:8px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}
.section-title span.sub{
    font-size:11px;
    color:var(--bx-muted);
    font-weight:400;
}

.field{
    margin-bottom:10px;
}
.field-label{
    font-size:13px;
    margin-bottom:6px;
    color:var(--bx-muted);
}
.input{
    width:100%;
    padding:9px 10px;
    border-radius:10px;
    border:1px solid var(--bx-border);
    background:#050a18;
    color:var(--bx-text);
    font-size:14px;
    outline:none;
    transition:var(--trans-fast);
}
.input::placeholder{color:#5f6b8f;}
.input:focus{
    border-color:var(--bx-primary);
    box-shadow:0 0 0 1px rgba(59,108,255,.55);
}
.ratio-info{
    font-size:12px;
    color:var(--bx-muted);
    display:flex;
    justify-content:space-between;
    gap:8px;
}

.pkg-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
}
.pkg-card{
    position:relative;
    border-radius:var(--radius-md);
    padding:9px 8px 9px;
    background:linear-gradient(140deg,#0a1228 0%,#060a1a 40%,#0c152e 100%);
    border:1px solid var(--bx-border);
}
.pkg-card.active{
    border-color:var(--bx-primary);
    box-shadow:0 0 0 1px rgba(59,108,255,.7);
}
.pkg-main{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:6px;
}
.pkg-amount{
    font-size:15px;
    font-weight:700;
}
.pkg-amount span{
    font-size:11px;
    margin-left:3px;
    color:var(--bx-muted);
    font-weight:400;
}
.pkg-coins{
    font-size:12px;
    color:var(--bx-muted);
    margin-top:2px;
}
.pkg-pay{
    font-size:11px;
    color:var(--bx-muted);
    text-align:right;
}
.pkg-tag{
    position:absolute;
    top:-9px;
    right:8px;
    background:linear-gradient(135deg,#4c8dff,#3b6cff);
    color:#fff;
    font-size:10px;
    padding:2px 8px 3px;
    border-radius:999px;
    box-shadow:0 4px 10px rgba(0,0,0,.4);
}

.coupon-section{
    margin-top:14px;
}
.btn-coupon-toggle{
    width:100%;
    padding:8px 10px;
    border-radius:10px;
    border:1px dashed rgba(255,77,79,.8);
    background:rgba(60,8,14,.9);
    color:#ffd7d9;
    font-size:12px;
    text-align:center;
}
.coupon-panel{
    margin-top:8px;
    padding:8px 9px 10px;
    border-radius:10px;
    border:1px solid rgba(255,77,79,.6);
    background:#1a0508;
    display:none;
}
.coupon-panel.open{display:block;}
.coupon-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    margin-bottom:6px;
}
.coupon-header span{
    font-size:11px;
    color:#ffb3b6;
}
.coupon-list{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}
.coupon-item{
    flex:0 0 calc(50% - 3px);
    min-height:50px;
    background:#26070c;
    border-radius:10px;
    border:1px dashed rgba(255,77,79,.75);
    padding:6px 7px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:relative;
    overflow:hidden;
}
.coupon-item.claimed{
    border-style:solid;
    border-color:#ff4d4f;
}
.coupon-item.active{
    border-color:var(--bx-success);
    box-shadow:0 0 0 1px rgba(19,194,122,.8);
}
.coupon-money{
    font-size:15px;
    font-weight:700;
    color:#ffebec;
}
.coupon-money span{
    font-size:11px;
    font-weight:400;
    margin-left:2px;
    color:#ffd1d3;
}
.coupon-cond{
    font-size:11px;
    color:#ffb3b6;
    margin-top:2px;
}
.coupon-tag{
    position:absolute;
    right:-24px;
    top:50%;
    transform:translateY(-50%) rotate(-32deg);
    font-size:10px;
    padding:2px 26px;
    background:rgba(255,77,79,.18);
    border-top:1px solid rgba(255,183,187,.7);
    border-bottom:1px solid rgba(255,183,187,.7);
    color:#ffe3e5;
}
.coupon-tag.on{
    background:rgba(19,194,122,.18);
    color:#e5fff3;
    border-top:1px solid rgba(138,238,191,.8);
    border-bottom:1px solid rgba(138,238,191,.8);
}
.btn-claim{
    font-size:11px;
    padding:6px 10px;
    border-radius:999px;
    border:none;
    background:linear-gradient(135deg,#ff9a9e,#ff4d4f);
    color:#fff;
    font-weight:600;
}
.btn-claim.disabled{
    opacity:.6;
    cursor:not-allowed;
    box-shadow:none;
    transform:none;
}
.coupon-hint{
    margin-top:6px;
    font-size:11px;
    color:#ffb3b6;
}

.pay-group{
    display:flex;
    gap:8px;
}
.pay-item{
    flex:1;
    padding:7px 8px;
    border-radius:10px;
    border:1px solid var(--bx-border);
    background:#050a18;
    display:flex;
    align-items:center;
    gap:7px;
    font-size:13px;
}
.pay-item.active{
    border-color:var(--bx-primary);
    box-shadow:0 0 0 1px rgba(59,108,255,.7);
}
.pay-icon-img{
    width:22px;
    height:22px;
    border-radius:6px;
    object-fit:contain;
    background:#02040a;
}
.pay-label span{
    display:block;
}
.pay-label .sub{
    font-size:11px;
    color:var(--bx-muted);
}

.order-summary{
    margin-top:10px;
    padding:9px 10px;
    background:#050a18;
    border-radius:10px;
    border:1px dashed rgba(255,255,255,.18);
    font-size:12px;
    color:var(--bx-muted);
}
.order-row{
    display:flex;
    justify-content:space-between;
    margin-bottom:4px;
}
.order-row strong{
    font-weight:600;
    color:var(--bx-text);
}
.order-row.total{
    margin-top:4px;
    padding-top:5px;
    border-top:1px dashed rgba(255,255,255,.14);
    font-size:13px;
}
.order-row.total span{
    color:#ffffff;
    font-weight:700;
}

.btn-primary{
    width:100%;
    margin-top:11px;
    padding:10px 8px;
    border-radius:999px;
    border:none;
    font-size:15px;
    font-weight:700;
    background:linear-gradient(135deg,#7aa5ff,#3b6cff);
    color:#fff;
    box-shadow:0 12px 26px rgba(59,108,255,.55);
}
.btn-primary[disabled]{
    opacity:.6;
    cursor:not-allowed;
    box-shadow:none;
    transform:none;
}

.tips{
    margin-top:9px;
    font-size:11px;
    line-height:1.6;
    color:var(--bx-muted);
}
.tips strong{color:#ffd666;}

.faq-card{
    margin-top:12px;
}
.faq-item{
    border-top:1px solid rgba(255,255,255,.08);
}
.faq-q-row{
    width:100%;
    border:none;
    background:transparent;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:8px 0;
}
.faq-q{
    font-size:13px;
    font-weight:600;
    text-align:left;
    color:#e6eeff;
}
.faq-toggle{
    font-size:11px;
    color:#c6d4ff;
    margin-left:8px;
}
.faq-a{
    font-size:12px;
    color:var(--bx-muted);
    line-height:1.7;
    padding:0 0 8px;
    display:none;
}
.faq-item.open .faq-a{
    display:block;
}
.faq-item.open .faq-toggle{
    color:#ffffff;
}

.modal-mask{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:50;
}
.modal-mask.show{display:flex;}
.modal{
    width:100%;
    max-width:420px;
    background:#050a18;
    border-radius:18px;
    box-shadow:0 18px 40px rgba(0,0,0,.75);
    border:1px solid rgba(113,139,255,.5);
    padding:14px 16px 12px;
}
.modal-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:8px;
}
.modal-title{
    font-size:15px;
    font-weight:700;
}
.modal-close{
    font-size:18px;
    line-height:1;
    padding:2px 6px;
    border-radius:999px;
    border:none;
    background:transparent;
    color:var(--bx-muted);
}
.modal-body{
    font-size:12px;
    color:var(--bx-muted);
    line-height:1.7;
}
.modal-body ul{
    list-style:none;
    margin:8px 0;
    padding:0;
}
.modal-body li{
    margin-bottom:4px;
}
.modal-body .sample{
    margin-top:6px;
    font-size:11px;
    color:#9bb1ff;
}
.modal-footer{
    margin-top:10px;
    display:flex;
    gap:8px;
}
.btn-outline{
    flex:1;
    padding:8px 0;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.25);
    background:transparent;
    color:var(--bx-text);
    font-size:13px;
}
.btn-confirm{
    flex:1.2;
    padding:8px 0;
    border-radius:999px;
    border:none;
    background:linear-gradient(135deg,#7aa5ff,#3b6cff);
    color:#fff;
    font-size:13px;
    font-weight:600;
}

.error-text{
    font-size:11px;
    color:var(--bx-danger);
    margin-top:3px;
}

footer{
    margin:14px -10px 0;
    padding:10px 10px 18px;
    border-top:1px solid var(--bx-border);
    background:rgba(3,6,18,.96);
    text-align:center;
    font-size:11px;
    color:var(--bx-muted);
}
.footer-links{
    margin-bottom:6px;
}
.footer-link{
    display:inline-block;
    margin:0 6px 6px;
    padding:4px 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(7,14,40,.9);
    font-size:11px;
}
.footer-icp{
    opacity:.8;
}