:root{
    --bg:#0c0c0c; --card:#181818; --text:#fff;
    --accent:#ff5f7a; --green:#00d26a; --red:#ff4747; --line:#2c2c2c;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg);color:var(--text);font-family:"PingFang SC","Microsoft YaHei",sans-serif;}

.login-page{position:fixed;inset:0;background:radial-gradient(circle at top,#222 0%,#000 70%);z-index:9999;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:25px;}
.login-logo{font-size:42px;font-weight:bold;margin-bottom:10px;letter-spacing:4px;}
.login-sub{color:#888;margin-bottom:40px;}
.pass-dots{height:24px;margin-bottom:30px;font-size:24px;letter-spacing:8px;color:var(--accent);}
.keypad{display:grid;grid-template-columns:repeat(3,90px);gap:18px;}
.key{width:90px;height:90px;border-radius:50%;background:#1f1f1f;border:2px solid #333;display:flex;align-items:center;justify-content:center;font-size:28px;cursor:pointer;transition:.2s;}
.key:active{transform:scale(.92);background:var(--accent);}

.header{position:sticky;top:0;z-index:1000;background:rgba(10,10,10,.9);border-bottom:1px solid var(--line);padding:14px 18px;display:flex;align-items:center;justify-content:space-between;}
.logo{font-size:22px;font-weight:bold;}
.login-btn{padding:10px 16px;border-radius:30px;background:var(--accent);cursor:pointer;font-size:14px;}

.filter-bar{position:sticky;top:65px;z-index:999;background:#111;border-bottom:1px solid var(--line);padding:15px;}
.region-scroll{display:flex;flex-wrap:wrap;gap:10px;width:100%;}
.region-btn{display:flex;align-items:center;justify-content:center;min-width:72px;padding:10px 16px;border-radius:30px;background:#222;cursor:pointer;flex:0 0 auto;font-size:14px;white-space:nowrap;}
.region-btn:hover{background:#333;}
.region-btn.active{background:var(--accent);}
.search-box{margin-top:14px;}
.search-box input{width:100%;height:46px;border:none;outline:none;background:#1d1d1d;color:#fff;border-radius:30px;padding:0 18px;font-size:15px;}

@media(max-width:768px){.region-btn{flex:1 1 calc(25% - 8px);padding:10px 12px;font-size:14px;}}
@media(max-width:520px){.region-btn{flex:1 1 calc(33.333% - 8px);font-size:13px;padding:9px 10px;}}
@media(max-width:380px){.region-btn{flex:1 1 calc(50% - 8px);}}

.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:12px;}
@media(min-width:600px){.grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:900px){.grid{grid-template-columns:repeat(5,1fr);}}
.card{background:var(--card);border-radius:18px;overflow:hidden;cursor:pointer;position:relative;transition:.25s;aspect-ratio:3/4;}
.card:hover{transform:translateY(-4px);}
.card img{width:100%;height:100%;object-fit:cover;display:block;}
.card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,.1),transparent);}
.card-info{position:absolute;left:14px;bottom:14px;right:14px;}
.card-name{font-size:17px;font-weight:bold;margin-bottom:6px;}
.card-region{color:#ddd;font-size:13px;}
.status-dot{position:absolute;top:12px;right:12px;width:16px;height:16px;border-radius:50%;border:2px solid #000;}
.top-badge{position:absolute;top:12px;left:12px;background:linear-gradient(135deg,#ffb347,#ff5f7a);color:#fff;font-size:11px;font-weight:bold;padding:3px 9px;border-radius:20px;z-index:2;box-shadow:0 2px 8px rgba(0,0,0,.3);}
.online{background:var(--green);box-shadow:0 0 12px var(--green);}
.busy{background:var(--red);box-shadow:0 0 12px var(--red);}

.detail-page{position:fixed;inset:0;z-index:99999;background:#000;overflow-y:auto;display:none;}
.close-btn{position:fixed;top:18px;right:18px;width:46px;height:46px;border-radius:50%;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;font-size:28px;cursor:pointer;z-index:999;}
.detail-wrap{max-width:1200px;margin:auto;padding:80px 20px 40px;}
.detail-top{display:grid;grid-template-columns:1fr 420px;gap:35px;}
@media(max-width:900px){.detail-top{grid-template-columns:1fr;}}
.big-photo{border-radius:20px;overflow:hidden;background:#111;position:relative;}
.big-photo img{width:100%;max-height:75vh;object-fit:contain;display:block;}
.big-photo video{width:100%;max-height:75vh;object-fit:contain;display:block;background:#000;}
.thumbs{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;}
.thumb{width:85px;height:85px;border-radius:10px;overflow:hidden;cursor:pointer;border:2px solid transparent;position:relative;}
.thumb.active{border-color:var(--accent);}
.thumb img{width:100%;height:100%;object-fit:cover;}
.thumb .play-badge{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.25);color:#fff;font-size:22px;text-shadow:0 1px 3px rgba(0,0,0,.6);}
.thumb .thumb-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#2a2a2a,#1a1a1a);}

.media-swipe-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(0,0,0,.55);color:#fff;font-size:12px;padding:6px 14px;border-radius:20px;pointer-events:none;transition:opacity .5s ease;opacity:1;}
.media-swipe-hint.fade-out{opacity:0;}
.detail-side{background:var(--card);border-radius:20px;padding:24px;}
.detail-name{font-size:32px;font-weight:bold;margin-bottom:18px;}
.info-item{display:flex;margin-bottom:16px;}
.info-label{width:80px;color:#999;}
.price{color:var(--accent);font-weight:bold;font-size:22px;}
.desc{margin-top:20px;line-height:1.8;color:#ddd;white-space:pre-wrap;word-break:break-word;}
.contact-title{margin-top:30px;margin-bottom:16px;font-size:18px;font-weight:bold;}
.contact-list{display:flex;flex-wrap:wrap;gap:12px;}
.contact-btn{flex:1;min-width:120px;background:#262626;border-radius:14px;padding:14px;text-align:center;cursor:pointer;}
.empty{text-align:center;padding:100px 20px;color:#777;}

/* =========================================================
   微信/QQ内置浏览器拦截遮罩
   独立的浅色主题，跟站点本身的深色主题无关，故意用 wx- 前缀避免冲突
   ========================================================= */
#wxInterceptOverlay{
    display:none;
    position:fixed;
    inset:0;
    z-index:99999;
    background:#fff;
    flex-direction:column;
}
.wx-header{
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 20px;
    border-bottom:1px solid #eee;
    background:#fff;
}
.wx-header-icon{
    width:36px;height:36px;
    background:#22c55e;
    border-radius:10px;
    color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-weight:bold;font-size:16px;
    flex-shrink:0;
}
.wx-header-title{
    font-weight:bold;font-size:18px;color:#111;
}
.wx-body{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:40px 24px;
    text-align:center;
}
.wx-phone-icon{
    width:96px;height:96px;
    background:#22c55e;
    border-radius:24px;
    display:flex;align-items:center;justify-content:center;
    margin-bottom:28px;
}
.wx-title{
    font-size:22px;font-weight:bold;color:#111;margin-bottom:16px;
}
.wx-desc{
    color:#8a8a8a;font-size:14px;line-height:1.9;margin-bottom:36px;max-width:420px;
}
.wx-desc span{color:#111;font-weight:bold;}
.wx-copy-btn{
    display:flex;align-items:center;justify-content:center;gap:8px;
    width:100%;max-width:360px;
    padding:16px;
    background:#22c55e;
    color:#fff;border:none;border-radius:30px;
    font-size:16px;font-weight:bold;
    cursor:pointer;
    box-shadow:0 12px 26px rgba(34,197,94,.35);
}
.wx-copy-btn:active{transform:scale(.98);}
.wx-hint{
    margin-top:26px;color:#c2c2c2;font-size:13px;line-height:1.9;
}

.member-pagination{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;padding:20px 12px 36px;}
.page-btn{min-width:38px;height:38px;padding:0 12px;border:none;border-radius:10px;background:#1d1d1d;color:#ccc;font-size:14px;cursor:pointer;}
.page-btn:hover:not(:disabled){background:#2a2a2a;}
.page-btn.active{background:var(--accent);color:#fff;font-weight:bold;}
.page-btn:disabled{opacity:.35;cursor:not-allowed;}
.page-ellipsis{color:#666;padding:0 4px;}

/* ===== 套餐列表 ===== */
.package-list{margin-top:16px;display:flex;flex-direction:column;gap:12px;}
.pkg-loading,.pkg-empty{color:#999;padding:14px 0;}
.pkg-card{background:#1f1f1f;border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.pkg-head{display:flex;justify-content:space-between;align-items:center;padding:16px;cursor:pointer;}
.pkg-name{font-size:16px;font-weight:bold;}
.pkg-price{color:var(--accent);font-weight:bold;font-size:18px;}
.pkg-body{padding:0 16px 16px;}
.pkg-images{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.pkg-images img{width:90px;height:90px;object-fit:cover;border-radius:10px;}
.pkg-items{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.pkg-item{display:flex;justify-content:space-between;background:#151515;border-radius:10px;padding:10px 12px;font-size:14px;}
.pkg-item-name{color:#fff;}
.pkg-item-desc{color:#999;}
.book-btn{background:var(--accent);color:#fff;text-align:center;padding:13px;border-radius:30px;font-weight:bold;cursor:pointer;}
.book-btn:active{transform:scale(.97);}
.book-btn-disabled{background:#555;color:#aaa;cursor:not-allowed;}
.book-btn-disabled:active{transform:none;}

/* ===== 聊天页面 ===== */
.chat-page{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--bg);}
.chat-top{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);background:#111;}
.chat-back{display:flex;align-items:center;gap:2px;cursor:pointer;color:#ccc;flex-shrink:0;}
.chat-back-arrow{font-size:26px;line-height:1;}
.chat-back-text{font-size:12px;white-space:nowrap;}
.chat-top-name{font-size:17px;font-weight:bold;}
.chat-top-status{font-size:12px;color:#999;margin-top:2px;}
.chat-messages{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;}
.chat-empty{color:#777;text-align:center;padding:60px 20px;}
.chat-msg{display:flex;margin-bottom:14px;}
.chat-msg .chat-bubble{max-width:72%;padding:11px 15px;border-radius:14px;line-height:1.6;font-size:14px;word-break:break-word;}
.chat-msg.user{justify-content:flex-end;}
.chat-msg.user .chat-bubble{background:var(--accent);color:#fff;}
.chat-msg.agent{justify-content:flex-start;}
.chat-msg.agent .chat-bubble{background:#222;color:#fff;}
.chat-msg.system{justify-content:center;}
.chat-msg.system .chat-bubble{background:transparent;color:#888;font-size:12px;padding:4px;}
.chat-order-box{padding:0 18px;}
.order-tip{background:#1f1f1f;border:1px solid var(--accent);border-radius:12px;padding:12px 16px;margin-bottom:12px;font-size:13px;}
.order-tip-status{color:var(--accent);margin-top:4px;}
.chat-msg .chat-bubble img{max-width:180px;max-height:180px;border-radius:10px;display:block;cursor:pointer;}

.location-card{width:240px;}
.location-card-text{font-size:14px;line-height:1.6;margin-bottom:6px;}
.location-card-hint{font-size:11px;color:#aaa;margin-bottom:10px;line-height:1.5;}
.location-card-actions{display:flex;gap:8px;}
.location-nav-btn,.location-copy-btn{flex:1;text-align:center;padding:8px 6px;border-radius:8px;font-size:12px;cursor:pointer;}
.location-nav-btn{background:var(--accent);color:#fff;}
.location-copy-btn{background:#333;color:#ddd;border:1px solid #444;}

.image-expired-box{width:160px;padding:20px 10px;text-align:center;color:#999;font-size:13px;background:#1a1a1a;border:1px dashed #444;border-radius:10px;}
.chat-bottom{display:flex;align-items:flex-end;gap:10px;padding:12px;border-top:1px solid var(--line);background:#111;}
.chat-bottom textarea{flex:1;resize:none;background:#1d1d1d;color:#fff;border:none;outline:none;border-radius:12px;padding:12px;font-size:14px;max-height:100px;}
.chat-bottom button{background:var(--accent);color:#fff;border:none;border-radius:12px;padding:0 20px;height:44px;font-weight:bold;cursor:pointer;}
.chat-icon-btn{background:#1d1d1d;border:1px solid #333;color:#ddd;border-radius:12px;width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;}