*{box-sizing:border-box}
.phone{background:#f3f4f6;color:#111}
.h5-vip{width:100%;min-height:760px;background:#f3f4f6;padding-bottom:28px}
.mark-box{outline:3px dashed #f5222d;outline-offset:6px}
.rules-box.mark-box{outline:none;border:3px dashed #f5222d}
.vip-top{height:48px;background:#1a1b1f;color:#fff;display:flex;align-items:center;justify-content:center;position:sticky;top:0;z-index:5}
.vip-top b{font-size:17px;font-weight:700}
.vip-top .back,.vip-top .cs{position:absolute;top:0;height:48px;display:grid;place-items:center;color:#fff;text-decoration:none;width:48px}
.vip-top .back{left:0;font-size:32px;line-height:1}
.vip-top .cs{right:4px;font-size:18px}

.hero{position:relative;height:210px;background:radial-gradient(circle at 50% 120%,#3a3328 0,#15161a 58%,#0e0f12 100%);overflow:hidden}
.arc{position:absolute;left:0;right:0;top:18px;width:100%;height:170px}
.arc text{fill:#f0d7a2;font-size:12px;font-family:"PingFang SC","Microsoft YaHei",sans-serif}
.avatar{position:absolute;left:50%;top:92px;width:54px;height:54px;margin-left:-27px;border-radius:50%;background:#111;border:2px solid #f3d7a0;display:grid;place-items:center;font-size:28px;z-index:1}
.uname{position:absolute;left:0;right:0;top:154px;text-align:center;color:#fff;font-size:13px}

.level-card{position:relative;margin:-18px 16px 0;background:linear-gradient(160deg,#3a3d45,#2a2d34 55%,#1f2228);border-radius:12px;color:#fff;padding:14px 16px 16px;box-shadow:0 10px 24px #0003;min-height:132px}
.level-card small{display:inline-block;background:#5b5e66;border-radius:4px;padding:2px 8px;font-size:11px;color:#ddd}
.level-card h2{margin:18px 0 6px;font-size:28px;font-weight:800}
.level-card h2 i{font-style:normal;font-size:14px;font-weight:600;margin-left:4px}
.level-card p{margin:0 0 10px;font-size:12px;color:#cfd2d8}
.level-card p span{color:#ff8a1d}
.level-card .pct{font-size:12px;color:#bbb;margin-bottom:6px}
.bar{height:4px;background:#5c5f66;border-radius:4px;overflow:hidden}
.bar i{display:block;width:2%;height:100%;background:#fff}
.ends{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:#c9ccd2}
.hex{position:absolute;right:18px;top:36px;width:64px;height:72px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(180deg,#7ec8ff,#3a6ea8);display:grid;place-items:center;font-size:20px;font-weight:800;letter-spacing:1px;box-shadow:0 8px 16px #0004}

.detail-btn{display:block;width:calc(100% - 72px);margin:18px auto 14px;border:0;background:#e9eaee;color:#8b8f97;border-radius:22px;height:40px;font-size:14px}

.withdraw{padding:8px 16px 0}
.withdraw h3{margin:8px 0 10px;font-size:16px}
.w-item{display:flex;align-items:center;gap:12px;background:#fff;border-radius:10px;padding:12px 14px;margin-bottom:8px}
.w-item .ico{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;font-size:22px;background:#fff6e8}
.w-item b{display:block;font-size:18px}
.w-item small{font-size:12px;color:#888;margin-left:2px;font-weight:600}
.w-item p{margin:2px 0 0;font-size:12px;color:#9aa0a8}

.priv{padding:18px 16px 8px}
.priv h3{position:relative;text-align:center;margin:6px 0 14px;font-size:18px}
.priv h3 i{position:absolute;left:0;right:0;top:-6px;font-style:normal;font-size:28px;letter-spacing:3px;color:#d9dce3;font-weight:800;z-index:0}
.priv h3 span{position:relative;z-index:1;background:linear-gradient(#f3f4f6,#f3f4f6);padding:0 10px}
.card{position:relative;border-radius:12px;overflow:hidden;color:#fff;background:#222 center/cover no-repeat;display:flex;flex-direction:column;justify-content:flex-end;padding:14px 16px;margin-bottom:10px;min-height:118px;box-shadow:0 8px 16px #0002}
.card:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,#0009 100%)}
.card strong,.card small{position:relative;z-index:1}
.card strong{font-size:18px}
.card small{font-size:12px;color:#e8e8e8;margin-top:4px}
.card.wide{min-height:132px}
.split{display:grid;grid-template-columns:1.15fr 1fr;gap:10px;margin-bottom:10px}
.split .card{margin:0;min-height:100%}
.stack{display:grid;gap:10px}
.gift{min-height:220px}
.live,.manager{min-height:105px}

.yacht{background-image:linear-gradient(180deg,transparent 28%,#0009),url("https://images.unsplash.com/photo-1544551763-46a013bb70d5?auto=format&fit=crop&w=1200&q=70");background-color:#14344a;background-position:center 70%}
.models{background-image:linear-gradient(180deg,transparent 28%,#0009),url("https://images.unsplash.com/photo-1519671482749-fd09be7ccebf?auto=format&fit=crop&w=1200&q=70");background-color:#2b1233;background-position:center 25%}
.gift{background-image:linear-gradient(180deg,transparent 40%,#000a),url("https://images.unsplash.com/photo-1607344645866-009c320b63e0?auto=format&fit=crop&w=900&q=70");background-color:#4a2a0a}
.live{background-image:linear-gradient(180deg,transparent 30%,#0008),url("https://images.unsplash.com/photo-1574629810360-7efbbe195018?auto=format&fit=crop&w=900&q=70");background-color:#1a2a14}
.manager{background-image:linear-gradient(180deg,transparent 30%,#0008),url("https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=900&q=70");background-color:#2a2420;background-position:center 20%}
.cash{background-image:linear-gradient(90deg,#111c 38%,transparent 72%),url("https://images.unsplash.com/photo-1579621970563-ebec7560ff3e?auto=format&fit=crop&w=1200&q=70");background-color:#1a1408;background-position:right center}

.detail-mask{position:absolute;inset:0;background:#f5f5f5;z-index:20;overflow:auto;border-radius:28px}
.detail-mask[hidden]{display:none}
.detail-modal{width:100%;background:#f5f5f5;min-height:100%}
.detail-modal header{height:48px;background:#1a1b1f;color:#fff;display:flex;align-items:center;justify-content:center;position:sticky;top:0;z-index:2}
.detail-modal header b{font-size:17px}
.detail-modal header button{position:absolute;left:0;width:48px;height:48px;border:0;background:none;color:#fff;font-size:28px}
.detail-body{padding:18px 12px 56px;color:#111}
.detail-body h2{text-align:center;font-size:16px;margin:10px 0 14px}
.detail-body h2:before,.detail-body h2:after{content:"";display:inline-block;width:46px;border-top:1px solid #ff7a23;margin:0 8px 4px}
.h5-table{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:22px;table-layout:fixed}
.h5-table th,.h5-table td{padding:10px 4px;text-align:center;border:1px solid #f0d0b8}
.h5-table th{background:#ff720f;color:#fff;font-weight:700}
.h5-table td{background:#fff;color:#333}
.h5-table tbody tr:nth-child(even) td{background:#fff5ee}
.rules-box{margin:8px 2px 20px;padding:8px 10px 12px;border-radius:8px}
.rules-box h2{margin-top:4px}
.rules-box ol{list-style:none;padding:0 4px;margin:0;color:#7b8490;font-size:13px;line-height:1.7}
.rules-box ol li{margin:0 0 14px}
.rules-box ol li b{display:block;margin-bottom:2px;color:#7b8490}
.rules-box ol li p{margin:0}