/* ============ 基础 ============ */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",sans-serif;color:#fff;background:#0b0820;font-size:14px}
button{border:0;background:transparent;color:fff;cursor:pointer;font-family:inherit}
input{border:0;outline:none;background:transparent;color:#fff;font-family:inherit}
a{color:#a855f7;cursor:pointer}

#app{height:100%;max-width:480px;margin:0 auto;position:relative;background:#0b0820;overflow:hidden}

.page{position:absolute;inset:0;display:none;flex-direction:column;overflow:hidden}
.page.active{display:flex}

/* ============ 登录 ============ */
.page-login{background:radial-gradient(ellipse at 50% 20%,#2a1560 0%,#0b0820 60%)}
.login-inner{padding:60px 28px 30px;display:flex;flex-direction:column;height:100%;justify-content:space-between}
.logo{text-align:center;margin-top:40px}
.logo-dot{width:80px;height:80px;margin:0 auto 16px;border-radius:50%;background:conic-gradient(#a855f7,#ec4899,#22d3ee,#a855f7);box-shadow:0 0 40px rgba(168,85,247,.8);position:relative;animation:pulse 2s infinite}
.logo-dot::after{content:"🎙️";position:absolute;inset:6px;border-radius:50%;background:#0b0820;display:flex;align-items:center;justify-content:center;font-size:32px}
@keyframes pulse{0%,100%{box-shadow:0 0 30px rgba(168,85,247,.6)}50%{box-shadow:0 0 60px rgba(236,72,153,.9)}}
.logo h1{font-size:28px;background:linear-gradient(90deg,#a855f7,#ec4899,#22d3ee);-webkit-background-clip:text;background-clip:text;color:fff}
.logo p{color:rgba(255,255,255,.5);margin-top:8px;font-size:13px}
.login-card{background:rgba(255,255,255,.06);backdrop-filter:blur(20px);border:1px solid rgba(168,85,247,.3);border-radius:20px;padding:24px}
.phone-row,.code-row{display:flex;align-items:center;background:rgba(0,0,0,.3);border-radius:12px;padding:14px 16px;margin-bottom:12px}
.prefix{color:#a855f7;margin-right:12px;font-weight:600}
.phone-row input{flex:1;font-size:16px}
.code-row input{flex:1;font-size:16px;letter-spacing:4px}
.code-btn{color:#22d3ee;font-size:13px;padding-left:12px;border-left:1px solid rgba(255,255,255,.15)}
.primary-btn{background:linear-gradient(90deg,#a855f7,#ec4899);padding:14px;border-radius:24px;font-size:16px;font-weight:600;box-shadow:0 4px 20px rgba(168,85,247,.5);margin-top:8px}
.primary-btn:active{transform:scale(.98)}
.agree{display:flex;align-items:flex-start;font-size:11px;color:rgba(255,255,255,.5);margin-top:16px;line-height:1.5}
.agree input{margin-right:6px;margin-top:2px}
.login-foot{text-align:center;font-size:11px;color:rgba(255,255,255,.3);padding-bottom:10px}

/* ============ 大厅 ============ */
.lobby-header{padding:12px 14px 0;background:linear-gradient(180deg,#1a0f3a,transparent)}
.top-row{display:flex;align-items:center;gap:10px}
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#a855f7,#ec4899);display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
.search-box{flex:1;display:flex;align-items:center;background:rgba(255,255,255,.08);border-radius:20px;padding:8px 12px;gap:6px;color:rgba(255,255,255,.4)}
.search-box input{flex:1;font-size:13px}
.wallet{display:flex;flex-direction:column;font-size:11px;gap:2px}
.coin{padding:2px 8px;border-radius:10px;font-weight:600}
.coin.gem{background:rgba(34,211,238,.15);color:#22d3ee}
.coin.gold{background:rgba(255,193,7,.15);color:#ffc107}

.cat-tabs{display:flex;gap:18px;margin-top:14px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}
.cat-tabs::-webkit-scrollbar{display:none}
.cat-tabs span{padding:4px 2px;color:rgba(255,255,255,.5);font-size:14px;white-space:nowrap;position:relative;cursor:pointer}
.cat-tabs span.active{color:#fff;font-weight:700}
.cat-tabs span.active::after{content:"";position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);width:18px;height:3px;border-radius:2px;background:linear-gradient(90deg,#a855f7,#ec4899)}

.room-grid{flex:1;overflow-y:auto;padding:10px 12px 80px;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}
.room-card{background:linear-gradient(160deg,rgba(168,85,247,.25),rgba(236,72,153,.1));border:1px solid rgba(168,85,247,.25);border-radius:16px;overflow:hidden;cursor:pointer}
.room-cover{height:90px;position:relative;display:flex;align-items:center;justify-content:center;font-size:36px}
.room-cover .live{position:absolute;top:6px;left:6px;background:rgba(239,68,68,.9);font-size:10px;padding:2px 6px;border-radius:8px}
.room-cover .hot{position:absolute;top:6px;right:6px;font-size:10px;color:#ffc107}
.room-info{padding:8px 10px}
.room-info .rn{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-info .rm{font-size:11px;color:rgba(255,255,255,.5);margin-top:4px;display:flex;justify-content:space-between}

.tabbar{position:absolute;left:0;right:0;bottom:0;height:60px;background:rgba(15,10,40,.95);backdrop-filter:blur(20px);display:flex;border-top:1px solid rgba(168,85,247,.2);padding-bottom:env(safe-area-inset-bottom)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:18px;color:rgba(255,255,255,.5)}
.tab span{font-size:10px;margin-top:2px}
.tab.active{color:#a855f7}
.tab.create{position:relative}
.tab.create::before{content:"";position:absolute;top:-18px;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#a855f7,#ec4899);box-shadow:0 0 20px rgba(168,85,247,.7);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:300;line-height:46px;left:50%;transform:translateX(-50%)}
.tab.create{font-size:0}
.tab.create span{margin-top:22px;color:#a855f7}

/* ============ 房间 ============ */
.page-room{background:linear-gradient(180deg,#1a0f3a 0%,#0b0820 100%)}
.room-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(168,85,247,.3),transparent 60%);pointer-events:none}
.room-top{position:relative;display:flex;align-items:center;padding:12px 14px;gap:10px;z-index:2}
.icon-btn{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.room-title{flex:1;min-width:0}
.rname{font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rmeta{font-size:11px;color:rgba(255,255,255,.5);margin-top:2px}
.top-actions{display:flex;gap:8px}

.announce{position:relative;margin:0 14px;padding:8px 12px;background:rgba(255,193,7,.1);border-left:3px solid #ffc107;border-radius:6px;font-size:11px;color:#ffd97a;z-index:2}

.mic-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:16px 14px 10px}
.mic{aspect-ratio:1/1.15;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;cursor:pointer;transition:all .2s}
.mic .seat{position:absolute;top:4px;left:6px;font-size:10px;color:rgba(255,255,255,.4)}
.mic .m-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;background:rgba(255,255,255,.1);color:rgba(255,255,255,.3);position:relative}
.mic.filled{background:rgba(168,85,247,.15);border-color:rgba(168,85,247,.5)}
.mic.filled .m-avatar{background:linear-gradient(135deg,#a855f7,#ec4899);color:#fff;box-shadow:0 0 12px rgba(168,85,247,.6)}
.mic.speaking{border-color:#22d3ee;box-shadow:0 0 16px rgba(34,211,238,.5)}
.mic.speaking .m-avatar::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #22d3ee;animation:ring 1s infinite}
@keyframes ring{0%{transform:scale(1);opacity:1}100%{transform:scale(1.25);opacity:0}}
.mic .m-name{font-size:10px;margin-top:4px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px}
.mic .m-role{font-size:9px;padding:1px 5px;border-radius:6px;margin-top:2px}
.mic .m-role.host{background:linear-gradient(90deg,#ffd700,#ff8c00);color:#000}
.mic .m-role.admin{background:#ec4899}
.mic .m-role.guest{background:#22d3ee;color:#000}
.mic .m-state{position:absolute;bottom:4px;right:4px;font-size:12px}
.mic.locked{opacity:.6}

.chat-box{position:relative;z-index:2;flex:1;overflow-y:auto;padding:8px 12px;display:flex;flex-direction:column;gap:6px;scrollbar-width:none}
.chat-box::-webkit-scrollbar{display:none}
.msg{font-size:12px;line-height:1.5;padding:6px 10px;background:rgba(255,255,255,.06);border-radius:10px;align-self:flex-start;max-width:90%;word-break:break-all}
.msg .u{color:#22d3ee;font-weight:600}
.msg .u.host{color:#ffd700}
.msg.gift-msg{background:linear-gradient(90deg,rgba(236,72,153,.25),rgba(255,193,7,.2));border:1px solid rgba(236,72,153,.4)}
.msg.sys{background:rgba(34,211,238,.1);color:#22d3ee;align-self:center;font-size:11px}

.room-bottom{position:relative;z-index:2;display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(11,8,32,.85);backdrop-filter:blur(20px)}
.rb{flex:1;background:rgba(255,255,255,.1);border-radius:20px;padding:10px 14px;font-size:13px;text-align:left;color:rgba(255,255,255,.5)}
.rb.icon{flex:0 0 40px;text-align:center;font-size:18px;padding:10px 0}
.rb.gift{flex:0 0 80px;background:linear-gradient(90deg,#ec4899,#ff8c00);text-align:center;font-weight:600;color:#fff}

/* ============ 全屏特效 ============ */
.fx-layer{position:absolute;inset:0;pointer-events:none;z-index:100;overflow:hidden}
.fx-item{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:fxIn 1.6s forwards}
.fx-item .fx-emoji{font-size:120px;filter:drop-shadow(0 0 30px currentColor)}
.fx-item .fx-text{font-size:22px;font-weight:800;margin-top:10px;text-shadow:0 0 20px currentColor}
.fx-item .fx-sub{font-size:14px;color:rgba(255,255,255,.8);margin-top:6px}
@keyframes fxIn{0%{opacity:0;transform:scale(.5)}20%{opacity:1;transform:scale(1.1)}30%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-30px) scale(1.1)}}

/* ============ 弹层 ============ */
.sheet-mask{position:absolute;inset:0;background:rgba(0,0,0,.6);z-index:200;display:none;align-items:flex-end;justify-content:center;backdrop-filter:blur(4px)}
.sheet-mask.active{display:flex}
.sheet{width:100%;background:linear-gradient(180deg,#1f1547,#0b0820);border-radius:20px 20px 0 0;padding:16px 16px calc(20px + env(safe-area-inset-bottom));max-height:80%;overflow-y:auto;animation:slideUp .25s}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.sheet-head h3{font-size:16px}
.close{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.1)}

.gift-target{font-size:12px;color:rgba(255,255,255,.6);margin-bottom:10px;padding:8px 12px;background:rgba(168,85,247,.15);border-radius:8px}
.gift-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gift-item{background:rgba(255,255,255,.05);border-radius:12px;padding:12px 6px;text-align:center;cursor:pointer;border:2px solid transparent;position:relative}
.gift-item.sel{border-color:#ec4899;background:rgba(236,72,153,.15)}
.gift-item .g-emoji{font-size:32px}
.gift-item .g-name{font-size:11px;margin-top:4px}
.gift-item .g-price{font-size:10px;color:#22d3ee;margin-top:2px}

.combo-row{display:flex;align-items:center;gap:8px;margin:14px 0;font-size:12px}
.combo{padding:6px 12px;border-radius:14px;background:rgba(255,255,255,.1);font-size:12px}
.combo.active{background:linear-gradient(90deg,#a855f7,#ec4899)}

.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pay-item{background:rgba(255,255,255,.06);border:1px solid rgba(168,85,247,.3);border-radius:12px;padding:14px;cursor:pointer;text-align:center}
.pay-item .p-gems{font-size:18px;font-weight:700;color:#22d3ee}
.pay-item .p-price{font-size:13px;color:#ffc107;margin-top:4px}
.pay-item .p-bonus{font-size:10px;color:#ec4899;margin-top:2px}
.pay-tip{text-align:center;font-size:11px;color:rgba(255,255,255,.4);margin-top:14px}

.input-sheet .emoji-row{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0;font-size:24px}
.input-sheet input{width:100%;background:rgba(255,255,255,.1);border-radius:12px;padding:12px 14px;font-size:14px}

/* ============ 我的 ============ */
.page-me{background:linear-gradient(180deg,#1a0f3a,#0b0820)}
.me-head{display:flex;align-items:center;gap:14px;padding:50px 20px 20px}
.me-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#a855f7,#ec4899);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;box-shadow:0 0 20px rgba(168,85,247,.6)}
.me-name{font-size:18px;font-weight:700}
.me-id{font-size:11px;color:rgba(255,255,255,.5);margin-top:2px}
.me-stats{display:flex;gap:14px;font-size:12px;color:rgba(255,255,255,.6);margin-top:8px}
.me-stats b{color:#fff;margin-right:2px}
.me-wallet{margin:0 14px;background:rgba(255,255,255,.06);border-radius:14px;padding:6px 0}
.me-wallet>div{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.05)}
.me-wallet>div:last-child{border-bottom:0}
.me-wallet span{flex:1;color:rgba(255,255,255,.7);font-size:13px}
.me-wallet b{font-size:18px;color:#22d3ee;margin-right:12px}
.me-wallet .mini{padding:5px 12px;background:linear-gradient(90deg,#a855f7,#ec4899);border-radius:12px;font-size:12px}
.me-menu{margin:14px;background:rgba(255,255,255,.06);border-radius:14px;overflow:hidden}
.me-menu>div{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.05);font-size:14px;cursor:pointer}
.me-menu>div:last-child{border-bottom:0}

/* ============ 榜单 ============ */
.simple-head{display:flex;align-items:center;gap:10px;padding:14px}
.simple-head h2{font-size:16px;flex:1}
.rank-tabs{display:flex;gap:20px;padding:0 16px 10px;border-bottom:1px solid rgba(255,255,255,.1)}
.rank-tabs span{padding:6px 0;color:rgba(255,255,255,.5);cursor:pointer}
.rank-tabs span.active{color:#ffc107;font-weight:700;border-bottom:2px solid #ffc107}
.rank-list{flex:1;overflow-y:auto;padding:10px 16px}
.rank-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.rank-item .rk{width:24px;font-weight:700;color:#ffc107}
.rank-item .r-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#a855f7,#ec4899);display:flex;align-items:center;justify-content:center;font-weight:700}
.rank-item .r-info{flex:1}
.rank-item .r-info b{font-size:14px}
.rank-item .r-info p{font-size:11px;color:rgba(255,255,255,.5);margin-top:2px}
.rank-item .r-val{color:#ffc107;font-weight:700;font-size:14px}

.msg-empty{text-align:center;color:rgba(255,255,255,.4);margin-top:80px;font-size:13px}

/* ============ toast ============ */
.toast{position:fixed;left:50%;bottom:120px;transform:translateX(-50%);background:rgba(0,0,0,.8);padding:10px 18px;border-radius:20px;font-size:13px;z-index:999;opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1}