: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{column-count:2;column-gap:12px;padding:12px;}
@media(min-width:900px){.grid{column-count:5;}}
.card{break-inside:avoid;margin-bottom:12px;background:var(--card);border-radius:18px;overflow:hidden;cursor:pointer;position:relative;transition:.25s;}
.card:hover{transform:translateY(-4px);}
.card img{width:100%;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;}
.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;}
.big-photo img{width:100%;max-height:75vh;object-fit:contain;display:block;}
.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;}
.thumb.active{border-color:var(--accent);}
.thumb img{width:100%;height:100%;object-fit:cover;}
.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;}