*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{--bg:#0c1018;--bg2:#131a26;--bg3:#1a2332;--bg4:#212d40;--accent:#c9953c;--accent2:#e0b05e;--accentDim:rgba(201,149,60,.15);--red:#d94040;--green:#3da856;--text:#e4e8ef;--text2:#8a95a8;--text3:#5a6478;--border:#1f2a3a;--bubbleSelf:#1e3328;--bubbleOther:#1a2332}
html,body{height:100%;background:#080c12;font-family:'Noto Sans SC',sans-serif;color:var(--text);overflow:hidden;position:fixed;width:100%}
#app{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:390px;height:844px;border-radius:36px;overflow:hidden;box-shadow:0 0 0 3px #2a3548,0 20px 80px rgba(0,0,0,.7);display:flex;flex-direction:column;background:var(--bg)}
@media(max-width:420px){#app{width:100%;height:100%;border-radius:0;box-shadow:none}}
.pages{flex:1;position:relative;overflow:hidden}
.page{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;background:var(--bg);transition:transform .3s,opacity .3s;z-index:1}
.page.active{transform:translateX(0);opacity:1;z-index:2}
.page.left{transform:translateX(-30%);opacity:0;z-index:1}
.page.right{transform:translateX(100%);opacity:0;z-index:1}
.page::-webkit-scrollbar{width:0}
#pgChat{display:flex;flex-direction:column;overflow:hidden}
.topNav{height:52px;display:flex;align-items:center;padding:0 16px;position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--border)}
.topNav .title{font-size:18px;font-weight:700;flex:1}
.bottomNav{height:64px;display:flex;align-items:stretch;background:var(--bg2);border-top:1px solid var(--border);flex-shrink:0}
.navItem{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;color:var(--text3);transition:color .2s;position:relative}
.navItem.active{color:var(--accent)}
.navItem i{font-size:20px}.navItem span{font-size:10px}
.navItem .badge{position:absolute;top:6px;right:calc(50% - 18px);min-width:16px;height:16px;border-radius:8px;background:var(--red);color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.searchBar{margin:8px 16px;padding:8px 14px;background:var(--bg3);border-radius:20px;display:flex;align-items:center;gap:8px;color:var(--text3);font-size:14px}
.searchBar input{background:none;border:none;outline:none;color:var(--text);font-size:14px;flex:1;font-family:inherit}
.msgItemWrap{position:relative;overflow:hidden}
.msgItem{display:flex;align-items:center;padding:12px 16px;gap:12px;cursor:pointer;transition:background .15s,transform .2s ease;position:relative;z-index:2;background:var(--bg)}
.msgItem:hover{background:var(--bg3)}
.msgItem.pinned{background:var(--accentDim);border-left:3px solid var(--accent)}
.msgItem .av{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;flex-shrink:0;position:relative}
.msgItem .av .onl{position:absolute;bottom:-1px;right:-1px;width:12px;height:12px;border-radius:50%;border:2px solid var(--bg)}
.msgItem .info{flex:1;min-width:0}
.msgItem .nameRow{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.msgItem .nm{font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msgItem .tm{font-size:11px;color:var(--text3);flex-shrink:0;margin-left:8px}
.msgItem .lm{font-size:13px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msgItem .urd{min-width:18px;height:18px;border-radius:9px;background:var(--red);color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;padding:0 5px;flex-shrink:0}
.msgDelBtn{position:absolute;right:0;top:0;bottom:0;width:80px;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;z-index:1;cursor:pointer}
.ctGroupTitle{padding:8px 16px;font-size:12px;color:var(--accent);font-weight:700;background:var(--bg2);position:sticky;top:0;z-index:5}
.ctItem{display:flex;align-items:center;padding:10px 16px;gap:12px;cursor:pointer;transition:background .15s}
.ctItem:hover{background:var(--bg3)}
.ctItem .av{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0;position:relative}
.ctItem .av .onl{position:absolute;bottom:-2px;right:-2px;width:10px;height:10px;border-radius:50%;border:2px solid var(--bg)}
.ctItem .nminfo{flex:1;min-width:0}
.ctItem .nm{font-size:14px;font-weight:500}
.ctItem .desc{font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.ctItem .silver{font-size:12px;color:var(--accent2);flex-shrink:0;font-weight:600}
.chatHeader{height:52px;display:flex;align-items:center;padding:0 12px;background:var(--bg2);border-bottom:1px solid var(--border);flex-shrink:0;position:sticky;top:0;z-index:10}
.chatHeader .bk{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;color:var(--text);font-size:18px}
.chatHeader .ct{flex:1;text-align:center}
.chatHeader .ct .nm{font-size:16px;font-weight:600}
.chatHeader .ct .sub{font-size:11px;color:var(--text3)}
.chatHeader .mr{width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text2);font-size:16px}
.chatBody{flex:1;overflow-y:auto;padding:12px;background:var(--bg);display:flex;flex-direction:column;gap:8px}
.chatBody::-webkit-scrollbar{width:3px}.chatBody::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:3px}
.bbl{display:flex;gap:8px;max-width:85%;animation:msgIn .3s ease-out}
.bbl.self{align-self:flex-end;flex-direction:row-reverse}
.bbl .ba{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;cursor:pointer}
.bbl .bc{padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.6;word-break:break-all}
.bbl:not(.self) .bc{background:var(--bubbleOther);border-top-left-radius:4px}
.bbl.self .bc{background:var(--bubbleSelf);border-top-right-radius:4px}
.bbl .bn{font-size:11px;color:var(--text3);margin-bottom:2px}
.bbl .bt{font-size:10px;color:var(--text3);margin-top:4px;text-align:right}
@keyframes msgIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.rpMsg{background:linear-gradient(135deg,#c0392b,#e74c3c)!important;border-radius:10px;padding:12px!important;cursor:pointer;min-width:200px;transition:transform .15s}
.rpMsg:hover{transform:scale(1.02)}
.rpMsg .rpTop{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.rpMsg .rpIco{width:36px;height:44px;background:#f5d78e;border-radius:4px 4px 8px 8px;display:flex;align-items:center;justify-content:center;font-size:20px;position:relative;overflow:hidden}
.rpMsg .rpIco::after{content:'';position:absolute;top:0;left:0;right:0;height:50%;background:rgba(255,255,255,.2);border-radius:4px 4px 0 0}
.rpMsg .rpWish{color:#f5d78e;font-size:13px;flex:1}
.rpMsg .rpBot{font-size:11px;color:rgba(255,255,255,.6);border-top:1px solid rgba(255,255,255,.15);padding-top:6px}
.rpMsg.rpExpired{background:linear-gradient(135deg,#7f8c8d,#95a5a6)!important}
.chatInputBar{padding:8px 12px;background:var(--bg2);border-top:1px solid var(--border);display:flex;align-items:flex-end;gap:8px;flex-shrink:0}
.chatInputBar .iw{flex:1;background:var(--bg3);border-radius:20px;padding:8px 14px;display:flex;align-items:center}
.chatInputBar .iw textarea{background:none;border:none;outline:none;color:var(--text);font-size:14px;resize:none;width:100%;max-height:80px;line-height:1.4;font-family:inherit}
.chatInputBar .iw textarea::placeholder{color:var(--text3)}
.chatInputBar .tb{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;color:var(--text2);font-size:18px;flex-shrink:0}
.chatInputBar .sb{background:var(--accent);color:#fff;border-radius:18px;padding:6px 16px;font-size:14px;font-weight:600;cursor:pointer;flex-shrink:0;border:none;font-family:inherit}
.chatInputBar .sb:disabled{opacity:.4;cursor:default}
.emojiPanel{display:none;padding:8px 12px;background:var(--bg2);border-top:1px solid var(--border);max-height:200px;overflow-y:auto}
.emojiPanel.show{display:block}
.emojiPanel .egrid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.emojiPanel .egrid span{font-size:22px;text-align:center;cursor:pointer;padding:4px;border-radius:6px;transition:background .15s}
.emojiPanel .egrid span:hover{background:var(--bg4)}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:100;display:none;align-items:center;justify-content:center}
.overlay.show{display:flex}
.modalBox{background:var(--bg2);border-radius:16px;padding:24px;width:320px;max-width:90vw;max-height:80vh;overflow-y:auto}
.modalBox::-webkit-scrollbar{width:3px}.modalBox::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:3px}
.modalBox h3{font-size:18px;margin-bottom:16px;color:var(--accent)}
.modalBox .mFld{margin-bottom:12px}
.modalBox .mFld label{display:block;font-size:12px;color:var(--text3);margin-bottom:4px}
.modalBox .mFld input,.modalBox .mFld textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;font-size:14px;outline:none;background:var(--bg3);color:var(--text);font-family:inherit}
.modalBox .mBtn{padding:10px 24px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.modalBox .mBtnSec{padding:10px 24px;background:var(--bg4);color:var(--text);border:none;border-radius:8px;font-size:14px;cursor:pointer;font-family:inherit;margin-left:8px}
.modalBox .mBtnDanger{padding:10px 24px;background:var(--red);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.rpModal{width:300px;background:linear-gradient(180deg,#c0392b 0%,#e74c3c 40%,#f5f5f5 40%);border-radius:16px;overflow:hidden;position:relative}
.rpModal .rpMt{padding:30px 20px 20px;text-align:center;color:#fff}
.rpModal .rpMt .rpCl{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;color:#fff}
.rpModal .rpMt h3{font-family:'ZCOOL QingKe HuangYou',sans-serif;font-size:22px;margin-bottom:8px}
.rpModal .rpMb{padding:20px;background:#f5f5f5}
.rpModal .rpFld{margin-bottom:14px}
.rpModal .rpFld label{display:block;font-size:12px;color:#666;margin-bottom:6px}
.rpModal .rpFld input{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:8px;font-size:15px;outline:none;background:#fff;font-family:inherit}
.rpModal .rpSnd{width:100%;padding:12px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit}
.rpOpenWrap{width:280px;perspective:800px;position:relative}
.rpOpenWrap .rpOBack{background:linear-gradient(135deg,#c0392b,#e74c3c);border-radius:16px;padding:40px 20px;text-align:center;color:#fff;position:relative;backface-visibility:hidden;transition:transform .6s ease;transform-style:preserve-3d}
.rpOpenWrap.opened .rpOBack{transform:rotateY(180deg)}
.rpOpenWrap .rpOBack h3{font-family:'ZCOOL QingKe HuangYou';font-size:20px;margin-bottom:12px}
.rpOpenWrap .rpOBack .rpOa{width:56px;height:56px;border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;border:3px solid rgba(255,255,255,.3)}
.rpOpenWrap .rpOBack .rpOw{color:#f5d78e;font-size:14px}
.rpOpenWrap .rpOBtn{margin-top:20px;padding:12px 40px;background:linear-gradient(135deg,#f5d78e,#c9953c);color:#1a0a00;border:none;border-radius:24px;font-size:18px;font-weight:900;cursor:pointer;font-family:'ZCOOL QingKe HuangYou';box-shadow:0 4px 12px rgba(0,0,0,.3);transition:transform .15s}
.rpOpenWrap .rpOBtn:active{transform:scale(.9)}
.rpOpenWrap .rpOBtn:disabled{opacity:.5;cursor:default}
.rpOpenWrap .rpOResult{position:absolute;top:0;left:0;right:0;bottom:0;background:#fff;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotateY(180deg);backface-visibility:hidden;transition:transform .6s ease;transform-style:preserve-3d}
.rpOpenWrap.opened .rpOResult{transform:rotateY(0)}
.rpOpenWrap .rpOResult .rpOam{font-size:36px;font-weight:900;color:var(--red)}
.rpOpenWrap .rpOResult .rpOl{font-size:12px;color:#999;margin-top:4px}
.rpOpenWrap .rpOResult .rpOcl{margin-top:20px;padding:8px 24px;background:#eee;border:none;border-radius:16px;font-size:13px;cursor:pointer;color:#666;font-family:inherit}
.rpGrabLst{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:101;display:none;align-items:flex-end;justify-content:center}
.rpGrabLst.show{display:flex}
.rpGrabPnl{width:100%;max-width:390px;max-height:60vh;background:var(--bg2);border-radius:16px 16px 0 0;overflow:hidden}
.rpGrabPnl .gh{padding:16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.rpGrabPnl .gh h4{font-size:16px}
.rpGrabPnl .gh .gc{width:28px;height:28px;border-radius:50%;background:var(--bg4);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;color:var(--text2)}
.rpGrabPnl .glb{overflow-y:auto;max-height:calc(60vh - 52px)}
.grabIt{display:flex;align-items:center;padding:12px 16px;gap:10px;border-bottom:1px solid var(--border)}
.grabIt .ga{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.grabIt .gn{flex:1;font-size:14px}
.grabIt .gam{font-size:15px;font-weight:700;color:var(--red)}
.toast{position:fixed;top:54px;left:50%;transform:translateX(-50%);background:var(--bg4);color:var(--text);padding:10px 20px;border-radius:20px;font-size:13px;z-index:200;opacity:0;transition:opacity .3s;pointer-events:none;border:1px solid var(--border);white-space:nowrap}
.toast.show{opacity:1}
.timeDiv{text-align:center;font-size:11px;color:var(--text3);padding:8px 0;position:relative}
.timeDiv::before,.timeDiv::after{content:'';position:absolute;top:50%;width:calc(50% - 40px);height:1px;background:var(--border)}
.timeDiv::before{left:0}.timeDiv::after{right:0}
.welcome{position:fixed;inset:0;z-index:50;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;transition:opacity .5s}
.welcome.hide{opacity:0;pointer-events:none}
.wl{width:80px;height:80px;background:linear-gradient(135deg,var(--accent),#8b6914);border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:40px;font-family:'ZCOOL QingKe HuangYou';color:#fff;box-shadow:0 8px 32px rgba(201,149,60,.3);animation:breath 3s ease-in-out infinite}
@keyframes breath{0%,100%{transform:scale(1);box-shadow:0 8px 32px rgba(201,149,60,.3)}50%{transform:scale(1.05);box-shadow:0 12px 48px rgba(201,149,60,.5)}}
.wt{font-family:'ZCOOL QingKe HuangYou';font-size:28px;color:var(--accent)}
.ws{font-size:14px;color:var(--text2)}
.we{padding:12px 48px;background:linear-gradient(135deg,var(--accent),#a87a28);color:#fff;border:none;border-radius:24px;font-size:16px;font-weight:600;cursor:pointer;font-family:inherit;box-shadow:0 4px 20px rgba(201,149,60,.3)}
.profileCard{margin:16px;padding:20px;background:linear-gradient(135deg,var(--bg3),var(--bg4));border-radius:16px;display:flex;align-items:center;gap:16px;border:1px solid var(--border);position:relative}
.profileCard .ma{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#8b6914);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:900;position:relative;flex-shrink:0}
.profileCard .mi{flex:1;min-width:0}
.profileCard .mi .mn{font-size:18px;font-weight:700;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.profileCard .mi .md{font-size:12px;color:var(--accent2);margin-top:4px;cursor:pointer}
.silverCard{margin:0 16px 12px;padding:16px;background:linear-gradient(135deg,#2a1f0a,#3d2e10);border-radius:14px;border:1px solid #5a4520;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.silverCard .scIcon{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#f5d78e,#c9953c);display:flex;align-items:center;justify-content:center;font-size:20px;color:#1a0a00;font-weight:900}
.silverCard .scInfo{flex:1}
.silverCard .scAmt{font-size:24px;font-weight:900;color:#f5d78e;cursor:pointer}
.silverCard .scLabel{font-size:11px;color:rgba(245,215,142,.6)}
.silverCard .vipBox{flex-basis:100%;margin-top:8px;padding:10px 14px;background:linear-gradient(135deg,#4a3520,#6b4c2a);border:1px solid #8b6914;border-radius:10px;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#f5d78e;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 2px 4px rgba(0,0,0,.3)}
.lvlBar{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.lvlBar .lIcon{font-size:13px}
.lvlBar .lNum{font-size:11px;color:var(--accent);font-weight:600;background:var(--accentDim);padding:1px 6px;border-radius:4px}
.menuItem{display:flex;align-items:center;padding:14px 16px;gap:12px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}
.menuItem:hover{background:var(--bg3)}
.menuItem i{width:20px;text-align:center;font-size:16px;color:var(--accent)}
.menuItem span{flex:1;font-size:14px}
.menuItem .ar{color:var(--text3);font-size:12px}
.menuItem .val{color:var(--accent2);font-size:13px;font-weight:600;margin-right:4px}
.vipBadge{background:linear-gradient(135deg,#f5d78e,#c9953c);color:#1a0a00;font-size:10px;padding:1px 6px;border-radius:4px;font-weight:700}
.vipCrown{position:absolute;top:-6px;right:-6px;font-size:18px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.momentItem{padding:14px 16px;border-bottom:6px solid var(--bg2)}
.momentItem .mTop{display:flex;gap:12px}
.momentItem .mAv{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}
.momentItem .mBody{flex:1;min-width:0}
.momentItem .mName{font-size:15px;font-weight:600;color:var(--accent);margin-bottom:4px;cursor:pointer}
.momentItem .mText{font-size:14px;line-height:1.6;margin-bottom:8px;word-break:break-all}
.momentItem .mTime{font-size:11px;color:var(--text3);margin-bottom:6px}
.momentItem .mActions{display:flex;gap:16px;margin-bottom:6px}
.momentItem .mAct{font-size:12px;color:var(--text3);cursor:pointer;transition:color .2s}
.momentItem .mAct:hover{color:var(--accent)}
.momentItem .mAct.liked{color:var(--red)}
.mLikeBox{background:var(--bg3);border-radius:6px;padding:8px 10px;margin-bottom:4px;display:flex;align-items:flex-start;gap:6px}
.mLikeBox i{color:var(--red);font-size:12px;margin-top:2px;flex-shrink:0}
.mLikeBox .mlNames{font-size:12px;color:var(--accent2);line-height:1.6}
.mCmtArea{background:var(--bg3);border-radius:6px;padding:8px 10px;font-size:12px}
.mCmtArea .mCmt{padding:3px 0;line-height:1.5}
.mCmtArea .mCmt .cn{color:var(--accent);font-weight:500;cursor:pointer}
.mCmtArea .mCmt .ct{color:var(--text2)}
.mCmtInput{display:flex;gap:6px;margin-top:6px;padding-top:6px;border-top:1px solid var(--border)}
.mCmtInput input{flex:1;background:var(--bg4);border:none;border-radius:12px;padding:6px 10px;color:var(--text);font-size:12px;outline:none;font-family:inherit}
.mCmtInput button{padding:4px 12px;background:var(--accent);color:#fff;border:none;border-radius:12px;font-size:12px;cursor:pointer;font-family:inherit;flex-shrink:0}
.dailyCard{margin:16px;padding:20px;background:linear-gradient(135deg,#2c1810,#4a2c1a);border-radius:16px;border:1px solid #5a3a2a;position:relative;overflow:hidden}
.dailyCard::before{content:'';position:absolute;top:-20px;right:-20px;width:80px;height:80px;background:radial-gradient(circle,rgba(201,149,60,.2),transparent);border-radius:50%}
.dailyCard .dcLabel{font-size:11px;color:var(--accent2);margin-bottom:8px;letter-spacing:2px}
.dailyCard .dcText{font-size:15px;line-height:1.8;color:#f0e0c8}
.dailyCard .dcAuth{font-size:12px;color:var(--accent);text-align:right;margin-top:8px}
.signInBtn{margin:0 16px;padding:12px;background:linear-gradient(135deg,var(--accent),#a87a28);color:#fff;border:none;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;width:calc(100% - 32px);display:flex;align-items:center;justify-content:center;gap:8px}
.signInBtn:disabled{opacity:.5;cursor:default;background:var(--bg4);color:var(--text3)}
.bgPts{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bgPts .pt{position:absolute;width:2px;height:2px;background:var(--accent);border-radius:50%;opacity:.3;animation:flUp linear infinite}
@keyframes flUp{0%{transform:translateY(100vh);opacity:0}10%{opacity:.3}90%{opacity:.3}100%{transform:translateY(-10vh);opacity:0}}
.typingInd{font-size:11px;color:var(--accent);animation:tpAni 1.5s infinite}
@keyframes tpAni{0%,100%{opacity:1}50%{opacity:.4}}
.quizOpt{padding:10px 14px;background:var(--bg4);border-radius:8px;cursor:pointer;font-size:14px;transition:background .15s;border:1px solid transparent;margin-bottom:8px}
.quizOpt:hover{border-color:var(--accent)}
.quizOpt.correct{background:rgba(61,168,86,.2);border-color:var(--green)}
.quizOpt.wrong{background:rgba(217,64,64,.2);border-color:var(--red)}
.vipTabs{display:flex;gap:0;margin-bottom:14px;background:var(--bg4);border-radius:8px;overflow:hidden}
.vipTab{flex:1;padding:8px 0;text-align:center;font-size:13px;cursor:pointer;transition:background .2s}
.vipTab.active{background:var(--accent);color:#fff;font-weight:600}
.vipCard{padding:14px;background:var(--bg3);border-radius:10px;border:1px solid var(--border)}
.vipCard .vcTitle{font-size:14px;font-weight:700;color:var(--accent2);margin-bottom:10px}
.vipCard .vcGrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.vipCard .vcItem{padding:10px 6px;background:var(--bg4);border-radius:8px;text-align:center;cursor:pointer;border:1px solid transparent;transition:border-color .2s}
.vipCard .vcItem:hover{border-color:var(--accent)}
.vipCard .vcDays{font-size:16px;font-weight:700;color:var(--accent)}
.vipCard .vcCost{font-size:11px;color:var(--text3);margin-top:4px}
.taskItem{display:flex;align-items:center;padding:12px 0;gap:12px;border-bottom:1px solid var(--border)}
.taskItem:last-child{border-bottom:none}
.taskItem .tIcon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.taskItem .tInfo{flex:1;min-width:0}
.taskItem .tName{font-size:14px;font-weight:500}
.taskItem .tDesc{font-size:11px;color:var(--text3);margin-top:2px}
.taskItem .tReward{font-size:12px;color:var(--accent2);font-weight:600}
.taskItem .tBtn{padding:6px 14px;border:none;border-radius:12px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;flex-shrink:0}
.taskItem .tBtn.done{background:var(--bg4);color:var(--text3);cursor:default}
.taskItem .tBtn.claim{background:var(--accent);color:#fff}
.taskItem .tBtn.go{background:var(--accentDim);color:var(--accent);border:1px solid var(--accent)}
.shopHeader{padding:16px;background:linear-gradient(135deg,#2c1810,#4a2c1a);border-bottom:1px solid #5a3a2a;position:relative;overflow:hidden}
.shopHeader::before{content:'';position:absolute;top:-30px;right:-30px;width:100px;height:100px;background:radial-gradient(circle,rgba(201,149,60,.15),transparent);border-radius:50%}
.shopHeader .shTop{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.shopHeader .shName{font-family:'ZCOOL QingKe HuangYou';font-size:22px;color:var(--accent2)}
.shopHeader .shLvl{display:flex;align-items:center;gap:6px}
.shopHeader .shLvlNum{font-size:18px;font-weight:900;color:var(--accent)}
.shopHeader .shExpBar{width:120px;height:8px;background:var(--bg4);border-radius:4px;overflow:hidden}
.shopHeader .shExpFill{height:100%;background:linear-gradient(90deg,var(--accent),#f5d78e);border-radius:4px;transition:width .5s ease}
.shopHeader .shExpText{font-size:10px;color:var(--text3)}
.shopHeader .shStats{display:flex;gap:16px;font-size:12px;color:var(--text2)}
.shopHeader .shStats b{color:var(--accent2)}
.shopGrid{display:grid;gap:6px;padding:10px 12px}
.shopSlot{aspect-ratio:1;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:transform .15s,box-shadow .15s;overflow:hidden;border:1px solid var(--border)}
.shopSlot:active{transform:scale(.93)}
.shopSlot.locked{background:var(--bg3);opacity:.4;cursor:default}
.shopSlot.empty{background:var(--bg3);border-style:dashed}
.shopSlot.instock{background:var(--bg3);border-color:rgba(201,149,60,.3)}
.shopSlot.soldout{background:var(--bg3);border-color:rgba(217,64,64,.3);opacity:.7}
.shopSlot .ssIcon{font-size:24px;line-height:1;margin-bottom:2px}
.shopSlot .ssName{font-size:9px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.shopSlot .ssStock{font-size:9px;color:var(--accent2);font-weight:600}
.shopSlot .ssSoldout{font-size:9px;color:var(--red);font-weight:600}
.shopSlot .ssLock{font-size:16px;color:var(--text3)}
.shopSlot .ssLockLv{font-size:8px;color:var(--text3);margin-top:1px}
.ssBarWrap{width:100%;height:4px;background:var(--border);border-radius:2px;margin-top:4px;overflow:hidden}
.ssBarFill{height:100%;border-radius:2px;transition:width .5s ease,background .3s ease}
.shopFeed{border-top:1px solid var(--border);padding:8px 12px}
.shopFeed .sfTitle{font-size:12px;color:var(--accent);font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:4px}
.shopFeed .sfList{max-height:140px;overflow-y:auto;font-size:12px}
.shopFeed .sfList::-webkit-scrollbar{width:2px}
.shopFeed .sfList::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:2px}
.shopFeed .sfItem{padding:4px 0;color:var(--text2);border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;animation:feedIn .3s ease-out}
@keyframes feedIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
.shopFeed .sfItem .sfWho{color:var(--accent);font-weight:500}
.shopFeed .sfItem .sfWhat{flex:1;text-align:center}
.shopFeed .sfItem .sfAmt{color:var(--accent2);font-weight:600;flex-shrink:0}
.shopUpgradeBtn{margin:8px 12px;padding:10px;background:linear-gradient(135deg,var(--accent),#a87a28);color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:6px;width:calc(100% - 24px)}
.shopUpgradeBtn:disabled{opacity:.4;cursor:default;background:var(--bg4);color:var(--text3)}
.shopQuickBtn{margin:12px 12px 8px;display:flex;gap:6px}
.shopQuickBtn button{flex:1;padding:8px 0;background:var(--bg3);border:1px solid var(--border);color:var(--text2);border-radius:8px;font-size:12px;cursor:pointer;font-family:inherit;transition:background .15s}
.shopQuickBtn button:hover{background:var(--bg4);border-color:var(--accent)}
@keyframes btnPulse{0%,100%{box-shadow:0 2px 8px rgba(201,149,60,.3)}50%{box-shadow:0 2px 16px rgba(201,149,60,.6)}}