:root{
  --bg0:#070b14;
  --bg1:#0c1426;
  --glass:rgba(255,255,255,.08);
  --glass2:rgba(255,255,255,.12);
  --glass3:rgba(255,255,255,.16);
  --stroke:rgba(255,255,255,.18);
  --stroke2:rgba(255,255,255,.28);
  --text:#f5f7ff;
  --muted:rgba(235,240,255,.62);
  --accent:#6aa8ff;
  --accent2:#9b7bff;
  --gold:#f2d08a;
  --green:#46d6a0;
  --red:#ff6b7a;
  --shadow:0 10px 30px rgba(0,0,0,.28);
  --shadow2:0 18px 48px rgba(0,0,0,.38);
  --r:22px;
  --r-sm:16px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --nav-h:64px;
  --kb:0px;
}
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;width:100%;min-height:100%;
  overflow-x:hidden;
  color:var(--text);
  background:var(--bg0);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","PingFang SC","Helvetica Neue",sans-serif;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}
button,input,select,textarea{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer;min-height:44px;min-width:44px}
img{max-width:100%;height:auto;display:block;object-fit:cover}
svg{width:1em;height:1em;display:block;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
svg.fill{fill:currentColor;stroke:none}
.icon{width:1.25rem;height:1.25rem;display:inline-grid;place-items:center;color:currentColor}
.icon svg{width:100%;height:100%}

.app{
  position:relative;
  width:100%;
  max-width:430px;
  min-height:100dvh;
  margin:0 auto;
  overflow:hidden;
  background:
    radial-gradient(120% 80% at 10% -10%,rgba(106,168,255,.28),transparent 42%),
    radial-gradient(90% 70% at 100% 0%,rgba(155,123,255,.22),transparent 40%),
    radial-gradient(80% 60% at 50% 100%,rgba(242,208,138,.10),transparent 45%),
    linear-gradient(180deg,#10182b 0%,#070b14 55%,#05080f 100%);
}

/* glass primitives */
.glass{
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
  border:1px solid var(--stroke);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter:saturate(180%) blur(28px);
  -webkit-backdrop-filter:saturate(180%) blur(28px);
}
.glass-strong{
  background:linear-gradient(165deg,rgba(255,255,255,.18),rgba(255,255,255,.06));
  border:1px solid var(--stroke2);
  box-shadow:var(--shadow2), inset 0 1px 0 rgba(255,255,255,.28);
  backdrop-filter:saturate(190%) blur(36px);
  -webkit-backdrop-filter:saturate(190%) blur(36px);
}

.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:12px;
  min-height:calc(56px + var(--safe-top));
  padding:calc(10px + var(--safe-top)) 16px 10px;
  background:linear-gradient(180deg,rgba(20,28,48,.72),rgba(20,28,48,.38));
  border-bottom:1px solid rgba(255,255,255,.10);
  backdrop-filter:saturate(180%) blur(24px);
  -webkit-backdrop-filter:saturate(180%) blur(24px);
}
.brand-logo{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
  font-weight:800;color:#2a1a05;
  background:linear-gradient(145deg,#fff1c4,#e0b35a);
  box-shadow:0 8px 20px rgba(224,179,90,.28), inset 0 1px 0 rgba(255,255,255,.65);
}
.brand-copy{flex:1;min-width:0;display:flex;flex-direction:column}
.brand-copy strong{font-size:17px;letter-spacing:.2px}
.brand-copy span{font-size:11px;color:var(--muted);margin-top:2px}
.round-btn{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;position:relative;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.round-btn .icon, .round-btn svg{width:22px;height:22px}
.notice-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--red);border:2px solid #121a2d;top:10px;right:10px}

main{padding-bottom:calc(var(--nav-h) + var(--safe-bottom) + 10px)}
.page{display:none;padding:14px 14px 18px;min-height:calc(100dvh - 56px - var(--safe-top))}
.page.active{display:block;animation:rise .28s ease}
@keyframes rise{from{opacity:.35;transform:translateY(8px)}to{opacity:1;transform:none}}

.wallet-card,.profile-head,.wallet-main,.room-card,.hero,.pet-card,.config-block,.event-card,.redpacket-card,.menu-list button,.stats-row>div,.transactions>div{
  border-radius:var(--r);
  background:linear-gradient(165deg,rgba(255,255,255,.13),rgba(255,255,255,.05));
  border:1px solid var(--stroke);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.2);
  backdrop-filter:saturate(170%) blur(22px);
  -webkit-backdrop-filter:saturate(170%) blur(22px);
}

.wallet-card{display:flex;justify-content:space-between;align-items:center;padding:14px}
.user-block{display:flex;align-items:center;gap:10px}
.avatar{
  width:40px;height:40px;border-radius:14px;display:grid;place-items:center;font-weight:800;
  background:linear-gradient(145deg,#7aa7ff,#8b6dff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
.avatar.large,.profile-avatar{width:48px;height:48px}
.avatar.pink{background:linear-gradient(145deg,#ff8eb0,#c86bff)}
.avatar.green{background:linear-gradient(145deg,#57e0b0,#2aa8d8)}
.avatar.purple{background:linear-gradient(145deg,#b197ff,#6d7dff)}
.avatar.red{background:linear-gradient(145deg,#ff8a7a,#ff5d8f)}
.avatar.cyan{background:linear-gradient(145deg,#7be7ff,#5b8dff)}
.avatar.bot{background:linear-gradient(145deg,#f2d08a,#d8a24a);color:#2a1a05}
.user-block>div:last-child,.balance-block{display:flex;flex-direction:column}
.user-block span,.balance-block small{font-size:11px;color:var(--muted);margin-top:3px}
.balance-block{text-align:right}
.balance-block b{display:block;color:var(--gold);font-size:20px;margin-top:2px}

.hero{
  position:relative;min-height:188px;margin-top:12px;padding:18px;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.hero::before{
  content:"";position:absolute;inset:-20% auto auto -10%;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 65%);pointer-events:none;
}
.hero-content{position:relative;z-index:1;max-width:62%}
.eyebrow{display:inline-flex;padding:5px 10px;border-radius:999px;font-size:11px;color:var(--gold);
  background:rgba(242,208,138,.14);border:1px solid rgba(242,208,138,.28)}
.hero h1{margin:10px 0 8px;font-size:24px;line-height:1.2;letter-spacing:.2px}
.hero p{margin:0 0 14px;font-size:13px;color:var(--muted);line-height:1.45}
.primary{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;padding:0 16px;border-radius:14px;font-weight:700;color:#10203a;
  background:linear-gradient(180deg,#ffffff,#d7e7ff);
  box-shadow:0 8px 22px rgba(106,168,255,.28), inset 0 1px 0 #fff;
}
.primary.small{min-height:40px;padding:0 14px;font-size:14px}
.hero-pet{position:relative;z-index:1;width:118px;height:118px;flex:none}
.hero-pet img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 20px rgba(0,0,0,.35))}

.ticker{
  margin-top:12px;display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  font-size:12px;color:var(--muted);overflow:hidden;
}
.ticker .icon{color:var(--accent);flex:none}
.ticker>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.section-title{display:flex;align-items:center;justify-content:space-between;margin:16px 2px 10px}
.section-title strong{font-size:15px}
.section-title button{min-width:auto;min-height:32px;padding:0 8px;color:var(--accent);font-size:13px}

.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.quick-grid button{
  min-height:88px;padding:10px 6px;border-radius:18px;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:linear-gradient(165deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  border:1px solid var(--stroke);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.quick-grid .qico{
  width:34px;height:34px;border-radius:12px;display:grid;place-items:center;
  color:#fff;background:linear-gradient(145deg,rgba(106,168,255,.95),rgba(155,123,255,.9));
  box-shadow:0 6px 14px rgba(90,130,255,.25);
}
.quick-grid .qico svg{width:18px;height:18px}
.quick-grid b{font-size:12px;font-weight:700}
.quick-grid span{font-size:10px;color:var(--muted)}

.room-list{display:grid;gap:10px}
.room-card{display:flex;align-items:center;gap:12px;padding:12px;width:100%;text-align:left;min-height:72px}
.room-icon{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;font-weight:800;flex:none}
.room-icon.gold{background:linear-gradient(145deg,#fff0c0,#e0b35a);color:#2a1a05}
.room-icon.blue{background:linear-gradient(145deg,#8eb7ff,#6a7dff);color:#fff}
.room-main{flex:1;min-width:0}
.room-main>div:first-child{display:flex;justify-content:space-between;gap:8px}
.room-main strong{font-size:14px}
.room-main time,.room-main p,.room-main span{font-size:12px;color:var(--muted)}
.room-main p{margin:4px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room-main span{display:inline-flex;align-items:center;gap:5px}
.room-main span i{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block}
.unread{
  min-width:22px;height:22px;padding:0 6px;border-radius:999px;display:inline-grid;place-items:center;
  background:linear-gradient(180deg,#ff8a95,#ff5b6c);color:#fff;font-size:11px;font-weight:700;
}

/* chat */
.chat-page{padding:0!important;display:none;flex-direction:column;height:100dvh;min-height:100dvh}
.chat-page.active{display:flex}
.chat-header{
  display:flex;align-items:center;gap:8px;
  padding:calc(8px + var(--safe-top)) 10px 10px;
  background:linear-gradient(180deg,rgba(18,26,44,.78),rgba(18,26,44,.45));
  border-bottom:1px solid rgba(255,255,255,.1);
  backdrop-filter:saturate(180%) blur(24px);
  -webkit-backdrop-filter:saturate(180%) blur(24px);
}
.chat-back,.chat-more{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:var(--text)
}
.chat-back svg,.chat-more svg{width:22px;height:22px}
.room-avatar{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;position:relative;
  background:linear-gradient(145deg,#fff0c0,#e0b35a);color:#2a1a05;font-weight:800}
.room-avatar i{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:var(--green);border:2px solid #121a2d}
.chat-title{flex:1;min-width:0}
.chat-title strong{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-title span{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.pinned{
  margin:8px 12px 0;padding:10px 12px;border-radius:14px;font-size:12px;color:var(--gold);
  background:rgba(242,208,138,.12);border:1px solid rgba(242,208,138,.25);
  backdrop-filter:blur(12px)
}
.message-list{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;padding:12px}
.date-chip{width:fit-content;margin:8px auto;padding:5px 10px;border-radius:999px;font-size:11px;color:var(--muted);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1)}
.message{display:flex;gap:8px;margin:12px 0}
.message-body{max-width:78%}
.message-body.wide{max-width:88%}
.sender{font-size:11px;color:var(--muted);margin:0 0 5px}
.bubble{
  position:relative;padding:10px 12px;border-radius:18px 18px 18px 8px;font-size:14px;line-height:1.4;
  background:linear-gradient(165deg,rgba(255,255,255,.16),rgba(255,255,255,.07));
  border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)
}
.bubble time{display:block;margin-top:6px;font-size:10px;color:var(--muted)}
.system-msg{text-align:center;font-size:12px;color:var(--muted);margin:10px 0}
.event-card{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px}
.event-card>div{display:flex;flex-direction:column;gap:4px}
.event-card strong{font-size:13px}
.event-card small{font-size:11px;color:var(--muted)}
.event-card button{min-height:36px;padding:0 12px;border-radius:12px;background:rgba(106,168,255,.2);color:#d7e8ff;border:1px solid rgba(106,168,255,.35)}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--red);display:inline-block;box-shadow:0 0 0 4px rgba(255,107,122,.18);margin-right:4px}
.voice-bubble{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.voice-bubble button{width:32px;height:32px;min-width:32px;min-height:32px;border-radius:50%;background:rgba(106,168,255,.25)}
.voice-bubble>div{display:flex;align-items:flex-end;gap:2px;height:16px}
.voice-bubble i{display:block;width:3px;border-radius:2px;background:rgba(255,255,255,.55)}
.voice-bubble i:nth-child(odd){height:8px}.voice-bubble i:nth-child(even){height:14px}
.image-message .poster{
  width:min(220px,70vw);aspect-ratio:4/3;border-radius:16px;padding:14px;display:flex;flex-direction:column;justify-content:flex-end;
  background:
    linear-gradient(180deg,transparent,rgba(0,0,0,.55)),
    linear-gradient(145deg,rgba(106,168,255,.55),rgba(155,123,255,.45));
  border:1px solid rgba(255,255,255,.18)
}
.image-message span,.image-message small{font-size:11px;color:rgba(255,255,255,.8)}
.image-message strong{font-size:18px;margin:4px 0}
.image-message time{display:block;margin-top:6px;font-size:10px;color:var(--muted)}
.redpacket-card{display:flex;align-items:center;gap:10px;padding:12px;width:100%;text-align:left}
.packet-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-weight:800;color:#3a2208;
  background:linear-gradient(145deg,#ffe7a8,#e0a84a)}
.redpacket-card strong{display:block;font-size:13px}
.redpacket-card span{font-size:11px;color:rgba(255,230,210,.8)}
.redpacket-card b{margin-left:auto;color:var(--gold);font-size:13px}
.sticker{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.sticker .icon{width:28px;height:28px;color:#ffb35c}

.emoji-panel{
  display:none;flex-wrap:wrap;gap:6px;padding:8px 10px;
  background:rgba(14,20,36,.9);border-top:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(18px)
}
.emoji-panel.open{display:flex}
.emoji-panel button{width:40px;height:40px;min-width:40px;min-height:40px;border-radius:12px;font-size:20px;background:rgba(255,255,255,.06)}

.composer{
  position:sticky;bottom:0;z-index:20;
  display:flex;align-items:flex-end;gap:6px;
  padding:8px 10px calc(8px + var(--safe-bottom) + var(--kb));
  background:linear-gradient(180deg,rgba(14,20,36,.55),rgba(14,20,36,.88));
  border-top:1px solid rgba(255,255,255,.1);
  backdrop-filter:saturate(180%) blur(24px);
  -webkit-backdrop-filter:saturate(180%) blur(24px);
  transform:translateY(0);
}
.composer .tool{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:var(--text)
}
.composer .tool svg{width:22px;height:22px}
.composer input{
  flex:1;min-width:0;min-height:44px;border-radius:16px;padding:10px 14px;
  border:1px solid rgba(255,255,255,.14);outline:none;
  background:rgba(255,255,255,.08);color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12)
}
.composer .send{
  min-width:64px;height:44px;padding:0 14px;border-radius:14px;font-weight:700;color:#10203a;
  background:linear-gradient(180deg,#fff,#d7e7ff);box-shadow:0 6px 16px rgba(106,168,255,.25)
}

/* wallet / profile */
.page-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.page-heading span{font-size:12px;color:var(--muted)}
.page-heading h2{margin:4px 0 0;font-size:24px}
.wallet-main{padding:18px}
.wallet-main>span,.wallet-main>small{display:block;color:var(--muted);font-size:12px}
.wallet-main strong{display:block;font-size:36px;margin:8px 0;letter-spacing:.3px}
.wallet-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.wallet-actions button{
  min-height:44px;border-radius:14px;font-weight:700;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14)
}
.transactions{display:grid;gap:8px}
.transactions>div{display:flex;align-items:center;gap:10px;padding:12px}
.transactions i{
  width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-style:normal;font-weight:800;
  background:rgba(255,255,255,.08)
}
.transactions i.in{color:var(--green)}.transactions i.out{color:var(--red)}
.transactions span{flex:1;display:flex;flex-direction:column}
.transactions b{font-size:13px}.transactions small{font-size:11px;color:var(--muted);margin-top:3px}
.transactions strong{font-size:14px;color:var(--green)}.transactions .negative{color:var(--red)}

.profile-head{display:flex;align-items:center;gap:12px;padding:14px}
.profile-head h2{margin:0 0 4px;font-size:20px}
.profile-head span{font-size:12px;color:var(--muted)}
.profile-head>button{min-height:36px;padding:0 12px;border-radius:12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14)}
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.stats-row>div{padding:14px 10px;text-align:center;display:flex;flex-direction:column}
.stats-row strong{font-size:20px;color:var(--gold)}.stats-row span{font-size:11px;color:var(--muted);margin-top:4px}
.menu-list{display:grid;gap:8px}
.menu-list button{display:flex;align-items:center;gap:10px;padding:12px;text-align:left;width:100%}
.menu-list .qico{
  width:36px;height:36px;border-radius:12px;display:grid;place-items:center;color:#fff;flex:none;
  background:linear-gradient(145deg,rgba(106,168,255,.95),rgba(155,123,255,.9))
}
.menu-list .qico svg{width:18px;height:18px}
.menu-list span{display:flex;flex:1;flex-direction:column}
.menu-list b{font-size:14px}.menu-list small{font-size:11px;color:var(--muted);margin-top:3px}
.menu-list em{font-style:normal;color:var(--muted);font-size:20px}

/* bottom nav */
.bottom-nav{
  position:fixed;z-index:40;left:50%;bottom:0;transform:translateX(-50%);
  width:min(430px,100%);
  height:calc(var(--nav-h) + var(--safe-bottom));
  padding:6px 10px var(--safe-bottom);
  display:grid;grid-template-columns:repeat(4,1fr);
  background:linear-gradient(180deg,rgba(16,22,38,.55),rgba(10,14,24,.88));
  border-top:1px solid rgba(255,255,255,.12);
  backdrop-filter:saturate(180%) blur(28px);
  -webkit-backdrop-filter:saturate(180%) blur(28px);
  box-shadow:0 -8px 28px rgba(0,0,0,.25);
}
.bottom-nav button{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:rgba(235,240,255,.55);min-height:52px
}
.bottom-nav button.active{color:var(--gold)}
.bottom-nav .icon, .bottom-nav svg{width:22px;height:22px}
.bottom-nav span{font-size:10px;font-weight:600}
.bottom-nav .badge{
  position:absolute;top:4px;right:18%;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  display:grid;place-items:center;background:var(--red);color:#fff;font-size:10px;font-style:normal
}

/* pet fab / window */
.pet-fab{
  position:fixed;z-index:45;width:64px;height:64px;border-radius:22px;right:max(12px, calc((100vw - 430px)/2 + 12px));
  bottom:calc(var(--nav-h) + var(--safe-bottom) + 14px);touch-action:none;
  background:linear-gradient(165deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
  border:1px solid rgba(242,208,138,.45);
  box-shadow:var(--shadow2), inset 0 1px 0 rgba(255,255,255,.28);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  display:grid;place-items:center;padding:0
}
.pet-fab img{width:46px;height:46px;border-radius:16px;object-fit:contain}
.pet-fab>span{
  position:absolute;right:-4px;top:-4px;min-height:18px;padding:2px 6px;border-radius:999px;
  background:var(--red);font-size:10px;font-weight:700;display:grid;place-items:center
}
.pet-fab small{position:absolute;right:0;top:68px;white-space:nowrap;font-size:10px;color:var(--muted)}

.pet-window{
  display:none;position:fixed;z-index:50;width:min(400px,calc(100vw - 16px));
  height:min(720px,calc(100dvh - 24px));left:50%;top:50%;transform:translate(-50%,-50%);
  border-radius:28px;overflow:hidden;flex-direction:column;
  background:linear-gradient(165deg,rgba(28,38,64,.82),rgba(10,14,26,.9));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.2);
  backdrop-filter:saturate(180%) blur(30px);-webkit-backdrop-filter:saturate(180%) blur(30px)
}
.pet-window.open{display:flex}
.pet-window>header{
  min-height:56px;display:flex;align-items:center;gap:8px;padding:10px 12px;touch-action:none;
  border-bottom:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04)
}
.drag-line{width:36px;height:4px;border-radius:999px;background:rgba(255,255,255,.28);margin:0 auto;display:none}
.pet-window>header>div:nth-child(2){flex:1;display:flex;flex-direction:column}
.pet-window>header strong{font-size:15px}
.pet-window>header span{font-size:11px;color:var(--muted)}
.pet-window>header button{
  width:36px;height:36px;min-width:36px;min-height:36px;border-radius:12px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)
}
.pet-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.08)}
.pet-tabs button{min-height:40px;border-radius:12px;color:var(--muted);background:transparent}
.pet-tabs button.active{color:var(--gold);background:rgba(242,208,138,.12);border:1px solid rgba(242,208,138,.22)}
.pet-content{flex:1;min-height:0;overflow:auto;padding:12px;-webkit-overflow-scrolling:touch}
.pet-view{display:none}.pet-view.active{display:block}
.battle-score{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.battle-score>div{display:flex;flex-direction:column}.battle-score .right{text-align:right}
.battle-score span{font-size:11px;color:var(--muted);margin-top:3px}
.battle-score>b{font-size:28px;color:var(--gold)}.battle-score i,.battle-score em{font-style:normal}
.arena{
  height:240px;margin:12px 0;position:relative;overflow:hidden;border-radius:22px;
  background:
    radial-gradient(circle at 50% 40%,rgba(106,168,255,.22),transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14)
}
.match-label{position:absolute;z-index:4;top:10px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--gold);
  padding:5px 10px;border-radius:999px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.12)}
.fighter{position:absolute;width:42%;bottom:28px;filter:drop-shadow(0 16px 18px rgba(0,0,0,.38));transition:.25s}
.fighter.left{left:7%}.fighter.right{right:7%;transform:scaleX(-1)}
.battle-result{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);font-size:11px;color:#fff;
  background:rgba(0,0,0,.4);padding:6px 10px;border-radius:999px;white-space:nowrap;border:1px solid rgba(255,255,255,.12)}
.arena.hit .fighter.left{animation:attackL .45s}.arena.hit .fighter.right{animation:attackR .45s}
@keyframes attackL{50%{transform:translateX(25px) rotate(-4deg)}}
@keyframes attackR{50%{transform:scaleX(-1) translateX(25px) rotate(-4deg)}}
.battle-log{font-size:12px;line-height:1.55;color:var(--muted);padding:10px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.move-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.move-buttons button,.main-pet-options button{
  padding:8px;border-radius:16px;display:flex;flex-direction:column;align-items:center;
  background:rgba(255,255,255,.06);border:1px solid transparent
}
.move-buttons button.active,.main-pet-options button.active{border-color:rgba(242,208,138,.45);background:rgba(242,208,138,.12)}
.move-buttons img,.main-pet-options img{width:56px;height:56px;border-radius:14px;object-fit:contain}
.move-buttons b,.main-pet-options b{font-size:11px;margin-top:4px}.move-buttons span{font-size:10px;color:var(--muted)}
.battle-lock,.save-config{
  width:100%;min-height:48px;border-radius:16px;font-weight:800;color:#2a1a05;
  background:linear-gradient(180deg,#fff1c8,#e0b35a);
  box-shadow:0 10px 24px rgba(224,179,90,.28), inset 0 1px 0 rgba(255,255,255,.65)
}
.rule-note{display:block;text-align:center;margin-top:8px;color:var(--muted);font-size:11px}
.pet-card{display:flex;align-items:center;gap:10px;padding:12px;margin-bottom:8px}
.pet-card.main{border-color:rgba(242,208,138,.35)}
.pet-card>img{width:64px;height:64px;border-radius:16px;flex:none;object-fit:contain}
.pet-card>div{flex:1;min-width:0}
.pet-card>div>div:first-child{display:flex;align-items:center;gap:7px}
.pet-card strong{font-size:14px}.pet-card span{font-size:11px;color:var(--gold)}
.pet-card p{font-size:11px;color:var(--muted);margin:5px 0}
.pet-stats{display:flex;gap:6px;flex-wrap:wrap}
.pet-stats b{font-size:10px;padding:4px 7px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1)}
.pet-card>button{min-height:36px;padding:0 10px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);font-size:12px}
.config-block{padding:12px;margin-bottom:8px}
.config-block>strong,.config-block>span{display:block}
.config-block>strong{font-size:14px}.config-block>span{font-size:11px;color:var(--muted);margin-top:3px}
.config-block label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;margin-top:10px;min-height:44px}
.config-block select{
  max-width:55%;min-height:36px;background:rgba(0,0,0,.25);color:#fff;
  border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:6px 10px
}
.main-pet-options{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.order-list{display:grid;gap:6px;margin-top:10px}
.order-list>div{display:flex;align-items:center;gap:8px;padding:8px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.order-list img{width:38px;height:38px;border-radius:12px;object-fit:contain}
.order-list b{flex:1;font-size:12px}
.order-list button{width:36px;height:36px;min-width:36px;min-height:36px;border-radius:10px;background:rgba(255,255,255,.08)}

/* modal */
.modal{display:none;position:fixed;z-index:70;inset:0}
.modal.open{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.redpacket-modal{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(330px,calc(100vw - 40px));padding:28px 20px 24px;border-radius:28px;text-align:center;
  background:linear-gradient(165deg,rgba(210,80,70,.92),rgba(110,28,40,.92));
  border:1px solid rgba(255,223,157,.35);
  box-shadow:0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2);
  backdrop-filter:blur(20px)
}
.modal-close{position:absolute;right:10px;top:10px;width:36px;height:36px;min-width:36px;min-height:36px;border-radius:50%;background:rgba(0,0,0,.2)}
.packet-seal{
  width:68px;height:68px;display:grid;place-items:center;margin:0 auto 12px;border-radius:50%;font-size:28px;font-weight:900;color:#351d05;
  background:linear-gradient(145deg,#ffe7a0,#d89b34);box-shadow:inset 0 1px 0 rgba(255,255,255,.55)
}
.redpacket-modal>span,.redpacket-modal>p,.redpacket-modal>small{font-size:12px;color:#ffd9c7}
.redpacket-modal h2{margin:8px 0;font-size:22px}
.open-packet{
  width:68px;height:68px;min-width:68px;min-height:68px;margin:13px 0;border-radius:50%;font-size:28px;color:#4a2405;font-weight:900;
  background:linear-gradient(145deg,#fff0b2,#d99c33);box-shadow:0 10px 25px rgba(0,0,0,.25)
}
.toast{
  position:fixed;z-index:90;left:50%;bottom:calc(var(--nav-h) + var(--safe-bottom) + 18px);
  transform:translate(-50%,20px);padding:10px 14px;border-radius:14px;
  background:rgba(20,24,36,.88);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(16px);font-size:13px;opacity:0;pointer-events:none;transition:.22s
}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:360px){
  .quick-grid{gap:6px}
  .quick-grid button{min-height:82px;padding:8px 4px}
  .hero{min-height:170px}
  .hero h1{font-size:21px}
  .hero-pet{width:96px;height:96px}
  .composer .tool[data-action="voice-record"]{display:none}
}
@media (min-width:431px){
  body{background:#03060d}
  .app{box-shadow:0 0 0 1px rgba(255,255,255,.06),0 30px 80px rgba(0,0,0,.45)}
}

.message.mine{flex-direction:row-reverse}
.message.mine .message-body{align-items:flex-end}
.message.mine .sender{text-align:right}
.message.mine .bubble{border-radius:18px 18px 8px 18px;background:linear-gradient(165deg,rgba(106,168,255,.45),rgba(106,168,255,.2));border-color:rgba(106,168,255,.35)}
.message.mine .avatar{background:linear-gradient(145deg,#6aa8ff,#9b7bff)}
.live-status{font-size:11px;color:var(--green)}