/* ===== BLACK GOLD PREMIUM THEME ===== */
:root {
    --bg:             #080601;
    --bg-card:        #100d06;
    --bg-card2:       #16120a;
    --gold:           #D4AF37;
    --gold-bright:    #FFD700;
    --gold-dark:      #8B6914;
    --gold-pale:      #c8a84b;
    --gold-dim:       rgba(212,175,55,.1);
    --gold-glow:      rgba(212,175,55,.28);
    --border:         rgba(212,175,55,.18);
    --border-hi:      rgba(212,175,55,.5);
    --text:           #ffffff;
    --text-sec:       #c8a84b;
    --text-muted:     #6a5930;
    --green-wx:       #07c160;
    --blue-qq:        #1d8bff;
    --red-ga:         #c0392b;
}

/* ---- Responsive Base ---- */
html {
    background: #080601 !important;
    height: auto !important;
    min-height: 100vh;
    font-size: 100px !important;
}
@media screen and (max-width: 750px) {
    html { font-size: 13.333vw !important; }
}
html, body { height: auto !important; }
body {
    background: #080601 !important;
    min-height: 100vh;
    font-family: 'PingFang SC','Microsoft YaHei',Arial,sans-serif;
    -webkit-font-smoothing: antialiased;
}
body:after { display: none !important; }

.content {
    width: 100%;
    max-width: 7.5rem;
    margin: 0 auto;
    background: #080601;
    min-height: 100vh;
}
@media screen and (min-width: 750px) {
    .content { box-shadow: 0 0 60px rgba(0,0,0,.8); }
}

/* ---- Logo ---- */
.logo {
    background: #080601;
    padding: .24rem 0 .2rem;
    text-align: center;
    border-bottom: 1px solid var(--border);
}
.logo img { width: min(88%, 4.2rem); height: auto; }

/* ---- Hero ---- */
.wc-hero {
    background: linear-gradient(160deg, #050400 0%, #100d04 45%, #050400 100%);
    border-bottom: 1px solid var(--border-hi);
    padding: .48rem .3rem .54rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.wc-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(212,175,55,.13) 0%, transparent 65%);
    pointer-events: none;
}
.wc-badge-top {
    display: inline-block;
    background: linear-gradient(135deg, var(--gold-dark), var(--gold));
    color: #000;
    font-size: .18rem;
    font-weight: 700;
    padding: .06rem .22rem;
    border-radius: .3rem;
    margin-bottom: .18rem;
    letter-spacing: .06rem;
}
.wc-hero-title {
    font-size: .6rem;
    font-weight: 700;
    color: var(--gold-bright);
    letter-spacing: .05rem;
    text-shadow: 0 0 30px rgba(255,215,0,.45), 0 2px 4px rgba(0,0,0,.8);
    margin-bottom: .12rem;
    line-height: 1.2;
}
.wc-hero-sub {
    font-size: .22rem;
    color: var(--text-muted);
    margin-bottom: .28rem;
    letter-spacing: .03rem;
}

/* Countdown */
.wc-countdown {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: .07rem;
    margin-bottom: .28rem;
}
.cd-block { text-align: center; }
.cd-num {
    display: block;
    background: rgba(0,0,0,.5);
    border: 1px solid var(--gold-dark);
    color: var(--gold-bright);
    font-size: .42rem;
    font-weight: 700;
    padding: .08rem .16rem;
    border-radius: .08rem;
    min-width: .66rem;
    line-height: 1.1;
}
.cd-sep { color: var(--gold-dark); font-size: .4rem; font-weight: 700; padding-bottom: .15rem; }
.cd-label { font-size: .15rem; color: var(--text-muted); margin-top: .06rem; }

.wc-cta-row { display: flex; justify-content: center; }
.wc-cta-btn {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: #000;
    font-size: .26rem;
    font-weight: 700;
    padding: .16rem .5rem;
    border-radius: .3rem;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 24px var(--gold-glow);
    display: inline-block;
    letter-spacing: .04rem;
    animation: gold-pulse 2.5s infinite;
    text-decoration: none;
}
@keyframes gold-pulse {
    0%,100% { box-shadow: 0 4px 24px var(--gold-glow); }
    50%      { box-shadow: 0 6px 36px rgba(212,175,55,.55); }
}

/* ---- Section Title ---- */
.sec-title {
    display: flex;
    align-items: center;
    padding: .3rem .3rem .14rem;
    font-size: .24rem;
    font-weight: 700;
    color: var(--gold-pale);
    gap: .12rem;
    letter-spacing: .04rem;
}
.sec-title::before {
    content: '';
    display: block;
    width: .05rem;
    height: .26rem;
    background: linear-gradient(to bottom, var(--gold-bright), var(--gold-dark));
    border-radius: .04rem;
    flex-shrink: 0;
}

/* ---- Platform Card ---- */
.plat-card {
    margin: .08rem .24rem .22rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: .22rem;
    overflow: hidden;
    position: relative;
}
.plat-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-dark), transparent);
}
.plat-card.featured { border-color: var(--gold-dark); box-shadow: 0 0 28px rgba(212,175,55,.12); }
.plat-card.featured::before { background: linear-gradient(90deg, transparent, var(--gold), transparent); }

.plat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .22rem .28rem .12rem;
}

/* Platform logo badge in header */
.plat-logo-badge {
    display: flex;
    align-items: center;
    gap: .14rem;
}
.plat-icon {
    width: .6rem;
    height: .6rem;
    border-radius: .12rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .28rem;
    font-weight: 900;
    flex-shrink: 0;
    letter-spacing: -.01rem;
}
.plat-icon-ga {
    background: linear-gradient(135deg, #8B0000, #c0392b);
    color: var(--gold-bright);
    font-size: .22rem;
    border: 1px solid rgba(255,215,0,.3);
}
.plat-icon-od {
    background: linear-gradient(135deg, #003580, #0052cc);
    color: #fff;
    font-size: .2rem;
}
.plat-name-wrap {}
.plat-name {
    font-size: .32rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: .01rem;
    display: block;
}
.plat-name-sub {
    font-size: .16rem;
    color: var(--text-muted);
    margin-top: .03rem;
    display: block;
}
.plat-logo-svg-wrap {
    display: flex;
    align-items: center;
    padding: .06rem 0;
}
.plat-logo-svg {
    height: .52rem;
    width: auto;
    max-width: 2.6rem;
    display: block;
    object-fit: contain;
}

.badge {
    font-size: .15rem;
    font-weight: 700;
    padding: .05rem .16rem;
    border-radius: .2rem;
    letter-spacing: .02rem;
    flex-shrink: 0;
}
.badge-main { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: #000; }
.badge-hot  { background: linear-gradient(135deg, #c0392b, #8b0000); color: #fff; }
.badge-blue { background: linear-gradient(135deg, #1565c0, #0d47a1); color: #fff; }

.plat-promo {
    margin: 0 .28rem .16rem;
    padding: .1rem .18rem;
    background: var(--gold-dim);
    border-left: 3px solid var(--gold-dark);
    border-radius: 0 .08rem .08rem 0;
    font-size: .2rem;
    color: var(--gold-pale);
    line-height: 1.5;
}

.plat-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .08rem;
    padding: 0 .28rem .18rem;
}
.plat-tag {
    background: rgba(212,175,55,.06);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: .15rem;
    padding: .04rem .12rem;
    border-radius: .15rem;
}

/* ---- Platform Buttons ---- */
.plat-btns {
    display: flex;
    gap: .16rem;
    padding: .06rem .28rem .26rem;
}
.btn-reg, .btn-app {
    flex: 1;
    font-size: .24rem;
    font-weight: 700;
    padding: .19rem 0;
    border-radius: .14rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .08rem;
    letter-spacing: .02rem;
    transition: all .2s;
    text-decoration: none;
}
.btn-reg:active, .btn-app:active { transform: scale(.97); }
.btn-reg {
    background: linear-gradient(135deg, #C9A227, #8B6914);
    border: 1px solid var(--gold);
    color: #000;
    box-shadow: 0 4px 16px rgba(212,175,55,.25);
}
.btn-app {
    background: linear-gradient(135deg, #1a3558, #0d1f38);
    border: 1px solid rgba(212,175,55,.35);
    color: var(--gold-pale);
}

/* ---- Divider ---- */
.wc-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
    margin: .1rem .28rem;
}

/* ---- CS Section ---- */
.cs-card {
    margin: .08rem .24rem .22rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: .22rem;
    padding: .24rem .28rem .28rem;
    position: relative; overflow: hidden;
}
.cs-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-dark), transparent);
}
.cs-title {
    font-size: .24rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: .2rem;
}
.cs-btns { display: flex; gap: .16rem; }
.btn-cs {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .12rem;
    padding: .2rem 0;
    border-radius: .14rem;
    font-size: .26rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    border: none;
    transition: transform .2s, box-shadow .2s;
    text-decoration: none;
}
.btn-cs:active { transform: scale(.97); }
.btn-cs i { font-size: .3rem; }
.btn-cs-wx {
    background: linear-gradient(135deg, #07c160, #059147);
    box-shadow: 0 4px 16px rgba(7,193,96,.25);
    width: 100%;
}
.btn-cs-qq {
    background: linear-gradient(135deg, #1d8bff, #0062cc);
    box-shadow: 0 4px 16px rgba(29,139,255,.25);
}
.cs-id-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .12rem;
    margin-top: .16rem;
}
.cs-id-label { font-size: .2rem; color: var(--text-muted); }
.cs-id-val {
    font-size: .3rem;
    font-weight: 700;
    color: var(--green-wx);
    letter-spacing: .03rem;
}

/* ---- Promo Section ---- */
.promo-card {
    margin: .08rem .24rem .22rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: .22rem;
    overflow: hidden;
    position: relative;
}
.promo-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.promo-header-bar {
    background: linear-gradient(135deg, var(--gold-dark), #5a4010);
    padding: .18rem .28rem;
    text-align: center;
    font-size: .22rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: .04rem;
}
.promo-grid-top {
    display: flex;
    border-bottom: 1px solid var(--border);
}
.promo-top-card {
    flex: 1;
    padding: .22rem .18rem;
    text-align: center;
    border-right: 1px solid var(--border);
}
.promo-top-card:last-child { border-right: none; }
.promo-top-label {
    font-size: .18rem;
    color: var(--text-muted);
    margin-bottom: .1rem;
    letter-spacing: .02rem;
}
.promo-top-num {
    font-size: .36rem;
    font-weight: 700;
    color: var(--gold-bright);
    line-height: 1.2;
}
.promo-top-rate {
    font-size: .16rem;
    color: var(--text-muted);
    margin-top: .06rem;
}

.promo-weekly-title {
    padding: .18rem .28rem .1rem;
    font-size: .22rem;
    font-weight: 700;
    color: var(--gold-pale);
    display: flex;
    align-items: center;
    gap: .1rem;
}
.promo-weekly-title::after {
    content: ''; flex: 1; height: 1px; background: var(--border);
}
.promo-tier-list { padding: .06rem .2rem .24rem; display: flex; flex-direction: column; gap: .1rem; }
.promo-tier-row {
    display: flex;
    align-items: center;
    padding: .14rem .2rem;
    background: rgba(212,175,55,.03);
    border: 1px solid rgba(212,175,55,.09);
    border-radius: .14rem;
    gap: .1rem;
    transition: all .2s;
}
.promo-tier-row.best {
    background: linear-gradient(135deg, rgba(212,175,55,.12), rgba(212,175,55,.06));
    border-color: rgba(212,175,55,.35);
    box-shadow: 0 2px 14px rgba(212,175,55,.1);
}
.promo-tier-rank { font-size: .24rem; width: .32rem; text-align: center; flex-shrink: 0; }
.promo-tier-dep { flex: 1; }
.promo-tier-dep-label { font-size: .13rem; color: var(--text-muted); line-height: 1.2; }
.promo-tier-dep-val { font-size: .24rem; font-weight: 700; color: #fff; line-height: 1.3; }
.promo-tier-arrow { color: var(--gold-dark); font-size: .24rem; flex-shrink: 0; }
.promo-tier-bonus { text-align: right; flex-shrink: 0; }
.promo-tier-bonus-val { font-size: .32rem; font-weight: 700; color: var(--gold-bright); line-height: 1.2; }
.promo-tier-rate {
    font-size: .15rem;
    color: var(--text-muted);
    text-align: right;
    margin-top: .02rem;
}
.promo-tier-row.best .promo-tier-rate {
    color: var(--gold);
    font-weight: 700;
}
.promo-tier-row.best .promo-tier-bonus-val {
    text-shadow: 0 0 12px rgba(255,215,0,.4);
}
.promo-best-tag {
    font-size: .12rem;
    background: var(--gold);
    color: #000;
    font-weight: 700;
    padding: .02rem .1rem;
    border-radius: .08rem;
    display: inline-block;
    margin-top: .03rem;
}
.promo-cs-hint {
    padding: .14rem .28rem .2rem;
    text-align: center;
    font-size: .18rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
}
.promo-cs-hint strong { color: var(--green-wx); font-size: .22rem; }

/* ---- WeChat Modal ---- */
.wc-modal-overlay {
    display: none;
    position: fixed; inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,.85);
    backdrop-filter: blur(6px);
    justify-content: center;
    align-items: center;
}
.wc-modal-overlay.open { display: flex; }
.wc-modal-box {
    background: linear-gradient(140deg, #100d06, #0a0800);
    border: 1px solid var(--gold-dark);
    border-radius: .24rem;
    padding: .38rem .34rem .46rem;
    width: 5.4rem;
    text-align: center;
    position: relative;
    box-shadow: 0 0 50px rgba(212,175,55,.2);
    animation: modal-pop .25s ease;
}
@keyframes modal-pop { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:scale(1)} }
.wc-modal-close {
    position: absolute; top: .16rem; right: .22rem;
    font-size: .4rem; color: var(--text-muted);
    cursor: pointer; background: none; border: none; padding: 0; line-height: 1;
}
.wc-modal-title { font-size: .34rem; font-weight: 700; color: var(--gold-bright); margin-bottom: .06rem; }
.wc-modal-sub { font-size: .18rem; color: var(--text-muted); margin-bottom: .24rem; }
.wc-modal-qr {
    width: 3.2rem; height: 3.2rem;
    border-radius: .16rem;
    border: 2px solid var(--gold-dark);
    margin: 0 auto .22rem;
    display: block;
}
.wc-modal-id-box {
    background: rgba(7,193,96,.08);
    border: 1px solid rgba(7,193,96,.3);
    border-radius: .12rem;
    padding: .14rem .22rem;
    margin-bottom: .16rem;
}
.wc-modal-id-label { font-size: .16rem; color: var(--text-muted); margin-bottom: .06rem; }
.wc-modal-id-val { font-size: .4rem; font-weight: 700; color: #07c160; letter-spacing: .05rem; }
.wc-copy-btn {
    background: rgba(7,193,96,.12);
    border: 1px solid #07c160;
    color: #07c160;
    font-size: .2rem;
    padding: .12rem .34rem;
    border-radius: .1rem;
    cursor: pointer;
    margin-bottom: .14rem;
    display: inline-block;
}
.wc-modal-hint { font-size: .17rem; color: var(--text-muted); line-height: 1.7; }
.wc-modal-hint span { color: var(--gold-pale); }

/* ---- Floating CS Buttons ---- */
.float-cs {
    position: fixed;
    right: .2rem;
    bottom: 1.4rem;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: .16rem;
}
.float-btn {
    width: .72rem; height: .72rem;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .34rem;
    box-shadow: 0 4px 20px rgba(0,0,0,.5);
    transition: transform .2s, box-shadow .2s;
    text-decoration: none;
    color: #fff;
}
.float-btn:hover { transform: scale(1.12); }
.float-btn i { font-size: .38rem; }
.float-wx { background: #07c160; box-shadow: 0 4px 20px rgba(7,193,96,.4); }
.float-qq { background: #1d8bff; box-shadow: 0 4px 20px rgba(29,139,255,.4); }

/* ---- Article Link Banner ---- */
.art-link-banner {
    display: flex;
    align-items: center;
    gap: .18rem;
    margin: .16rem .24rem .1rem;
    padding: .2rem .26rem;
    background: linear-gradient(135deg, #100d06, #1a1506);
    border: 1px solid var(--gold-dark);
    border-radius: .18rem;
    text-decoration: none;
    transition: all .2s;
}
.art-link-banner:active { opacity: .85; }
.art-link-icon { font-size: .38rem; flex-shrink: 0; }
.art-link-text { flex: 1; }
.art-link-title {
    font-size: .22rem;
    font-weight: 700;
    color: var(--gold-bright);
    margin-bottom: .04rem;
}
.art-link-sub { font-size: .16rem; color: var(--text-muted); }
.art-link-arrow {
    font-size: .44rem;
    color: var(--gold-dark);
    flex-shrink: 0;
    line-height: 1;
}

/* ---- FAQ Accordion ---- */
.faq-list {
    margin: 0 .24rem .22rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: .16rem;
    overflow: hidden;
}
.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .18rem .22rem;
    font-size: .2rem;
    font-weight: 700;
    color: var(--gold-pale);
    cursor: pointer;
    user-select: none;
    gap: .12rem;
}
.faq-q:active { opacity: .85; }
.faq-arrow {
    font-size: .16rem;
    color: var(--gold-dark);
    transition: transform .25s;
    flex-shrink: 0;
}
.faq-a {
    max-height: 0;
    overflow: hidden;
    font-size: .19rem;
    color: #8a7540;
    line-height: 1.8;
    padding: 0 .22rem;
    transition: max-height .3s ease, padding .3s ease;
}
.faq-item.open .faq-arrow { transform: rotate(180deg); }
.faq-item.open .faq-a {
    max-height: 3rem;
    padding: 0 .22rem .18rem;
}

/* ---- Left Float Nav ---- */
.left-float-nav {
    position: fixed;
    left: .14rem;
    bottom: 1.4rem;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: .12rem;
}
.lfn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: .72rem;
    height: .72rem;
    border-radius: .14rem;
    background: rgba(16,13,6,.94);
    border: 1px solid var(--gold-dark);
    text-decoration: none;
    gap: .04rem;
    transition: all .2s;
    box-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.lfn-item:hover, .lfn-item:active { border-color: var(--gold); transform: scale(1.08); }
.lfn-icon { font-size: .26rem; line-height: 1; }
.lfn-text { font-size: .12rem; color: var(--gold-pale); line-height: 1; }

/* ---- Footer ---- */
.wc-footer {
    text-align: center;
    padding: .3rem .24rem .5rem;
    font-size: .16rem;
    color: #2a2010;
    border-top: 1px solid rgba(212,175,55,.08);
}
.wc-footer a { color: #2a2010; text-decoration: none; }