@font-face { font-family: Poppins; src: url(/assets/fonts/Poppins-Regular.ttf); font-weight: 400; }
@font-face { font-family: Poppins; src: url(/assets/fonts/Poppins-Medium.ttf); font-weight: 500; }
@font-face { font-family: Poppins; src: url(/assets/fonts/Poppins-SemiBold.ttf); font-weight: 600; }
@font-face { font-family: Poppins; src: url(/assets/fonts/Poppins-Bold.ttf); font-weight: 700; }
@font-face { font-family: Poppins; src: url(/assets/fonts/Poppins-ExtraBold.ttf); font-weight: 800; }

* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  background: #0B0931;
  color: #fff;
  font-family: Poppins, "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif;
}
#app-root {
  min-height: 100%;
  max-width: 430px;
  margin: 0 auto;
  position: relative;
  background: #0B0931;
}
#page { min-height: 100vh; overflow-x: hidden; }
#page.has-tabs { padding-bottom: 96px; }
[hidden] { display: none !important; }
img { max-width: 100%; }
button { font-family: inherit; }

/* login */
.login-screen {
  min-height: 100vh;
  width: 100%;
  background: #0B0931 url("/assets/login/login_bg3.jpg") center/cover no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.login-panel {
  width: 100%;
  min-height: 46vh;
  border-radius: 30px 30px 0 0;
  background: linear-gradient(0deg, #24206D 0%, #463ED3 100%);
  padding: 30px 20px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.login-title { font-size: 24px; font-weight: 700; }
.login-sub { font-size: 14px; font-weight: 500; color: #9AADF9; margin: 6px 0 20px; }
.login-card {
  width: 100%;
  height: 79px;
  margin-bottom: 12px;
  background: #6860FF;
  border-radius: 20px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 16px;
  cursor: pointer;
}
.login-card img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; background: #463ED3; }
.login-card-title { font-size: 14px; font-weight: 700; }
.login-card-sub { font-size: 12px; color: #ffffff80; }
.chev { margin-left: auto; font-size: 28px; color: #fff; }
.login-legal { text-align: center; font-size: 12px; padding: 10px; }
.login-form-box {
  background: linear-gradient(0deg, #24206D 0%, #463ED3 100%);
  border-radius: 30px 30px 0 0;
  padding: 24px 24px 32px;
}
.login-logo { display: block; width: 90px; margin: 0 auto 16px; }
.login-form-box input, .login-form-box select {
  width: 100%;
  padding: 12px 0;
  margin-bottom: 12px;
  border: 0;
  border-bottom: 1px solid #4F458D;
  background: transparent;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  outline: none;
}
.login-form-box option { color: #000; }
.login-submit {
  width: 100%;
  height: 45px;
  margin-top: 24px;
  border: 0;
  border-radius: 30px;
  background: linear-gradient(100.25deg, #DA81E5 29.74%, #9D9AF9 74.59%), #5F53FF;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}
.login-ghost {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  border: 0;
  background: transparent;
  color: #9D9AF9;
}

/* tab bar — 主頁 / 店舖 / 立即點唱 / 聊天室 / 個人帳戶 */
.vs-tabwrap {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 430px;
  z-index: 200;
}
.vs-tabbar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 62px;
  background: #0B0931;
  border-top: 1.5px solid #261C62;
  align-items: end;
  padding-bottom: 8px;
}
.vs-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #5a5794;
  text-decoration: none;
  font-size: 9px;
  font-weight: 700;
  gap: 2px;
}
.vs-tab.on { color: #c9c6ff; }
.vs-tab img { width: 22px; height: 22px; }
.vs-mic {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -22px;
  width: 110px;
  text-align: center;
  cursor: pointer;
}
.vs-mic img { height: 58px; }
.sing_btn_text {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  background: linear-gradient(90deg, #c9c6ff, #9D9AF9);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.2px;
}

/* guest banner */
.guest-reward-container { padding: 10px 10px 0; }
.guest-reward-background {
  width: 100%;
  height: 60px;
  background-image: url(/assets/login/reward.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 15px;
}
.guest-reward-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 15px;
  cursor: pointer;
}
.guest-reward-details {
  width: calc(50% + 35px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.guest-reward-amount {
  display: flex;
  align-items: center;
  color: #f6e408;
  text-shadow: 1px 2px 0 #7F63E8;
  font-size: 20px;
  font-style: italic;
  font-weight: 800;
  line-height: 1;
}
.guest-reward-amount img { width: 22px; height: 22px; margin-left: 4px; }
.guest-reward-text {
  color: #fff;
  text-shadow: 1px 2px 0 #7F63E8;
  font-size: 12px;
  font-style: italic;
  font-weight: 800;
  line-height: 1;
  margin-top: 2px;
}
.guest-verify-button {
  width: 93px;
  height: 29px;
  border-radius: 30px;
  background: rgba(255,255,255,.3);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  font-style: italic;
}

/* HOME */
.vs-home {
  min-height: 100vh;
  background: linear-gradient(180deg, #0b0931 0%, #151515 72%), #151515;
  color: #fff;
  padding-bottom: 12px;
}
.home-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}
.home-loc {
  max-width: 55%;
  height: 35px;
  padding: 5px 14px 5px 6px;
  border-radius: 30px;
  border: 1px solid #9D9AF9;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
}
.home-loc img { width: 22px; height: 22px; }
.home-scan {
  height: 35px;
  min-width: 90px;
  padding: 0 14px;
  border-radius: 40px;
  background: #000;
  border: 1px solid #5F53FF;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
}
.home-user { display: flex; align-items: center; padding: 6px 10px 16px; gap: 10px; }
.home-avatar-wrap { width: 65px; height: 65px; position: relative; flex-shrink: 0; }
.home-avatar {
  width: 62px; height: 62px; border-radius: 50%; object-fit: cover;
  background: #1b1540; border: 3px solid #0b0931;
}
.home-badge {
  width: fit-content; height: 22px; border-radius: 30px; background: #272647;
  border: 1px dashed #56548d; display: inline-flex; align-items: center;
  padding: 0 8px; margin-bottom: 4px; font-size: 10px; font-weight: 500; color: #B2B1DD; gap: 4px;
}
.home-badge img { width: 11px; height: 11px; }
.home-name { font-size: 14px; font-weight: 700; }
.home-lv { display: flex; align-items: center; gap: 7px; margin-top: 4px; }
.home-lv-num { font-size: 12px; font-weight: 600; font-style: italic; }
.home-lv-bar {
  width: 150px; height: 16px; border-radius: 20px;
  border: .5px solid rgba(85,71,131,.5); background: #1E1839;
  position: relative; overflow: hidden; box-shadow: inset 0 4px 4px rgba(0,0,0,.25);
}
.home-lv-fill {
  height: 100%; min-width: 16px; width: 8%; border-radius: 30px;
  background: linear-gradient(90deg, #443DBE 0%, #8F5EE3 100%);
}
.home-lead {
  width: 45px; height: 45px; background: #39358069; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin-left: auto;
}
.home-wallets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 10px 14px; }
.home-wallet {
  min-height: 70px; padding: 10px; background: #030211;
  border: 1px solid #341EBB; border-radius: 20px;
}
.home-wallet label { font-size: 0.7rem; color: #9D9AF9; font-weight: 400; }
.home-wallet .amt { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.home-wallet .amt img { height: 18px; }
.home-wallet .fiat { font-size: 12px; color: #513FA5; line-height: 1; margin-top: 2px; }
.home-wallet.gem { display: flex; align-items: center; justify-content: space-between; }
.home-plus {
  width: 30px; height: 30px; border-radius: 10px;
  background: url(/assets/imgs/topup.png) center/cover;
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px;
}

/* onstage */
.onstage {
  width: 100%;
  border-top-right-radius: 30px;
  background: url(/assets/imgs/onstage_bg.png) 30% 100% no-repeat;
  padding: 10px 0 8px;
}
.now-playing {
  margin: 0 15px 10px;
  height: 34px;
  background: #0B0931;
  border-radius: 30px;
  display: flex;
  align-items: center;
  padding: 0 8px 0 12px;
  gap: 8px;
}
.eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.eq i { width: 3px; background: #9D9AF9; border-radius: 2px; animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(1) { height: 6px; animation-delay: 0s; }
.eq i:nth-child(2) { height: 12px; animation-delay: .15s; }
.eq i:nth-child(3) { height: 8px; animation-delay: .3s; }
@keyframes eq { 50% { transform: scaleY(.4); } }
.now-playing marquee { flex: 1; font-size: 12px; color: #fff; }
.flag {
  min-width: 24px; min-height: 24px; border: 1px solid #FF86C9; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #FF86C9; font-size: 11px;
}
.singer-row { display: flex; align-items: center; padding: 0 15px 12px; gap: 10px; }
.singer-row img {
  width: 70px; height: 70px; border-radius: 50%; object-fit: cover; background: #2a2468;
}
.singer-row .nm { font-size: 16px; font-weight: 700; }
.score-card {
  margin: 0 15px;
  padding: 15px;
  background: linear-gradient(89.83deg, rgba(33,30,100,.31) 0%, rgba(11,9,49,.52) 35%, rgba(11,9,49,.17) 100%);
  backdrop-filter: blur(30px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 20px 20px 0 0;
  display: flex; flex-direction: column; align-items: center;
}
.score-num { font-size: 28px; font-weight: 700; }
.score-num span { font-size: 14px; font-style: italic; color: #9D9AF9; margin-left: 4px; }
.gift-cta {
  width: 100%; height: 43px; margin-top: 10px;
  background: linear-gradient(to left, #DA81E5 30%, #9D9AF9 75%), linear-gradient(96deg, #6D62FF 21%, #493CF1 87%);
  box-shadow: 0 6px 0 #110D47;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  position: relative; font-size: 15px; font-weight: 700;
}
.gift-cta img { height: 52px; position: absolute; left: 8px; bottom: 2px; }
.cheer {
  margin: 0 15px 12px;
  min-height: 44px;
  border-radius: 0 0 20px 20px;
  padding: 10px 10px 10px 15px;
  border: 1px solid rgba(255,255,255,.15);
  background: linear-gradient(90deg, #1F3583 0%, #0B0931 43%, #0B0931 60%, #3B215B 95%);
  display: flex; align-items: center; gap: 10px;
  color: #5A58A8; font-size: 14px;
}
.cheer img { width: 22px; padding-right: 10px; border-right: 1px solid #5E5BB8; }

/* gifts + queue + shortcuts */
.sec { padding: 4px 12px 12px; }
.sec-h { display: flex; align-items: center; justify-content: space-between; margin: 8px 4px 10px; }
.sec-h h3 { margin: 0; font-size: 14px; font-weight: 700; }
.sec-h a { font-size: 12px; color: #cfcfff; text-decoration: none; }
.gift-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gift-card { text-align: left; }
.gift-card .pic {
  width: 100%; aspect-ratio: 16/10; border-radius: 10px; object-fit: cover; display: block; background: #1a1648;
}
.gift-card .price {
  margin-top: 6px; width: fit-content; padding: 2px 8px; background: #3a3578; border-radius: 20px;
  font-size: 11px; display: flex; align-items: center; gap: 3px;
}
.gift-card .price img { width: 12px; }
.gift-card .old { color: #7a77b8; text-decoration: line-through; font-size: 10px; margin-left: 4px; }
.gift-card .lim { font-size: 10px; color: #6d6aa8; float: right; margin-top: 8px; }

.queue-wrap {
  background: linear-gradient(180deg, #1a1650 0%, #0d0b22 100%);
  border-top-right-radius: 28px;
  padding: 12px 0 8px;
}
.queue-scroller {
  display: flex; gap: 10px; overflow-x: auto; padding: 8px 14px 16px;
  scrollbar-width: none;
}
.queue-scroller::-webkit-scrollbar { display: none; }
.q-card {
  flex: 0 0 118px; height: 168px; border-radius: 16px; border: 1px solid #4a46a0;
  background: #14114D; padding: 18px 8px 8px; position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.q-card img.av { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #2a2468; }
.q-card .title { font-size: 12px; font-weight: 600; margin-top: 8px; line-height: 1.2; }
.q-card .sub { font-size: 10px; color: #c9a4ff; margin-top: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.q-tag {
  position: absolute; top: -8px; left: 10px; height: 18px; padding: 0 8px;
  border-radius: 10px; background: linear-gradient(90deg, #c44cff, #ff4db0);
  font-size: 8px; font-weight: 800; display: flex; align-items: center;
}
.q-honor {
  border: 1.5px dashed #f0c14b; background: #0e0c2c;
  box-shadow: 0 0 0 2px rgba(240,193,75,.25);
}
.q-honor .plus {
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #f0c14b;
  color: #f0c14b; display: flex; align-items: center; justify-content: center; margin-top: 8px;
}
.q-new { position: absolute; top: -2px; right: -2px; font-size: 11px; font-weight: 900; font-style: italic; color: #fff; }

.shortcut-wrap {
  background: #0a0918;
  border-top-right-radius: 24px;
  padding: 14px 10px 24px;
}
.shortcut-wrap h3 { margin: 0 8px 12px; font-size: 14px; }
.shortcuts { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.shortcuts img { width: 72px; height: 72px; object-fit: contain; margin: 0 auto; display: block; }
.shortcuts span { display: block; font-size: 12px; margin-top: 4px; }
.shortcuts .dot {
  position: absolute; top: 2px; right: 18px; width: 16px; height: 16px; border-radius: 50%;
  background: #ff3b5c; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.shortcuts > div { position: relative; }

/* shop */
.shop {
  min-height: 100vh;
  background: radial-gradient(120% 80% at 80% -10%, #3a2a8a 0%, #09072C 45%);
  padding-bottom: 20px;
}
.shop-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 14px 8px; }
.shop-top h1 { margin: 0; font-size: 22px; font-weight: 700; }
.shop-actions { display: flex; gap: 8px; align-items: center; }
.bag-pill {
  height: 31px; padding: 0 12px; border-radius: 30px; background: rgba(255,255,255,.28);
  backdrop-filter: blur(10px); display: flex; align-items: center; gap: 5px; font-size: 13px;
}
.hist-btn {
  width: 31px; height: 31px; border-radius: 50%; background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.curr-row { display: flex; gap: 8px; padding: 8px 12px 16px; overflow: hidden; }
.curr {
  flex: 1; min-width: 0; height: 78px; border-radius: 16px; padding: 10px 12px;
  position: relative; overflow: hidden;
}
.curr.vp { background: linear-gradient(135deg, #d9d4ff, #9aa6ff); color: #2a2468; }
.curr.vg { background: linear-gradient(135deg, #f6e27a, #e8b14a); color: #5a3a00; }
.curr.hn { background: linear-gradient(135deg, #c9e0ff, #8eb6f7); color: #1a3a70; }
.curr .k { font-size: 11px; font-weight: 700; letter-spacing: .4px; }
.curr .n { font-size: 20px; font-weight: 700; margin-top: 2px; }
.curr .s { font-size: 11px; opacity: .7; }
.market-tab {
  width: 72px; height: 28px; background: #5b6dff; border-radius: 10px 10px 0 0;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; margin-left: 12px;
}
.shop-search {
  display: block;
  margin: 12px 14px;
  width: calc(100% - 28px);
  height: 40px;
  border: 0;
  border-radius: 24px;
  background: #2a2468;
  color: #fff;
  text-align: center;
  padding: 0 16px;
  font-size: 14px;
  outline: none;
}
.shop-search::placeholder { color: #7a77b0; }
.shop-banner { padding: 0 14px 12px; }
.shop-banner img { width: 100%; border-radius: 16px; display: block; object-fit: cover; height: 86px; }
.shop-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 14px 14px;
  scrollbar-width: none;
}
.shop-chips::-webkit-scrollbar { display: none; }
.shop-chip {
  flex-shrink: 0;
  height: 32px;
  padding: 0 16px;
  border-radius: 20px;
  background: #2a2468;
  color: #9d9af9;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
}
.shop-chip.on {
  background: transparent;
  border: 1px solid #9D9AF9;
  color: #fff;
}
.prod-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 8px;
  padding: 0 12px 24px;
}
.prod { text-align: center; }
.prod img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  background: #1a1648;
}
.vp-pill {
  margin: 8px auto 0;
  width: fit-content;
  min-width: 86px;
  height: 28px;
  padding: 0 12px;
  border-radius: 20px;
  background: linear-gradient(90deg, #ff7ad9, #c9a0ff);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.vp-pill img { width: 16px; height: 16px; }
.shop-empty { text-align: center; padding: 60px 20px; color: #6d6aa8; }
.shop-empty .ico { font-size: 48px; margin-bottom: 12px; opacity: .6; }

/* chat */
.chat-page { min-height: 100vh; background: #0B0931; }
.chat-head {
  display: flex; align-items: center; justify-content: center; padding: 14px 16px 8px; position: relative;
  font-size: 16px; font-weight: 600;
}
.chat-head .bell { position: absolute; right: 16px; font-size: 18px; }
.chat-search {
  margin: 8px 14px 12px; height: 38px; border-radius: 20px; background: #2a2468;
  color: #7a77b0; display: flex; align-items: center; padding: 0 16px; font-size: 14px;
}
.chat-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.chat-item img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: #1b1540; }
.chat-item .t { font-size: 14px; font-weight: 700; }
.chat-item .p { font-size: 12px; color: #9D9AF9; }
.chat-item .m { font-size: 12px; color: #7a77b0; }
.chat-item .tm { margin-left: auto; font-size: 11px; color: #7a77b0; align-self: flex-start; }

/* profile */
.prof { min-height: 100vh; background: #0B0931; padding-bottom: 20px; }
.prof-head { background: #1B1540; border-radius: 0 0 30px 30px; padding-bottom: 8px; }
.seg {
  display: flex; background: #070622; border-radius: 30px; padding: 3px; width: fit-content;
}
.seg span {
  padding: 6px 14px; border-radius: 30px; font-size: 13px; color: #9D9AF9;
}
.seg span.on { background: #5F53FF; color: #fff; font-weight: 700; }
.gear { width: 28px; height: 28px; opacity: .9; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; padding: 12px 0 8px; }
.stats b { display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 16px; font-weight: 500; }
.stats .st-ico { display: inline-block; object-fit: contain; }
.stats .st-ico.vg { height: 16px; width: 16px; }
.stats .st-ico.vp { height: 18px; width: auto; }
.stats i { font-style: normal; font-size: 11px; color: #8b88c8; }
.lvl-wrap { position: relative; height: 84px; margin: 4px 12px 0; }
.lvl-back {
  position: absolute; left: 0; right: 0; bottom: 0; height: 52px;
  background: #735292; border-radius: 15px 15px 0 0;
  display: flex; justify-content: flex-end; align-items: center;
}
.lvl-sidol {
  width: calc(50% + 10px); height: 100%;
  display: flex; align-items: center; padding-right: 8px;
}
.lvl-front {
  position: absolute; left: 0; bottom: 0; width: 50%; height: 59px; z-index: 2;
}
.lvl-skew {
  position: absolute; left: 0; top: 0; width: calc(100% - 2px); height: 59px;
  margin-left: 18px; border-radius: 15px 15px 0 0;
  transform: skew(30deg);
  background: linear-gradient(101.31deg, #F8F5FC 0%, #C3D4E8 48.81%, #D4AAE7 100%), #D9D9D9;
}
.lvl-front-in {
  position: relative; z-index: 3; height: 59px;
  display: flex; align-items: center;
}
.lvl-badge { width: 70px; height: 59px; position: relative; flex-shrink: 0; }
.lvl-badge img {
  width: 70px; height: 70px; object-fit: contain;
  position: absolute; top: -25px; left: -7px;
  border-radius: 50%; background: #5a3d78;
}
.svip-orb {
  width: 70px; height: 70px; position: absolute; top: -25px; left: -7px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #d7c9ff, #6d5cff 48%, #2a1f6a);
  box-shadow: 0 6px 12px #0005;
  display: flex; align-items: center; justify-content: center;
}
.svip-orb b { font-size: 28px; font-style: italic; color: #fff; letter-spacing: -1px; margin-top: -6px; }
.svip-orb em {
  position: absolute; bottom: 8px; font-size: 7px; font-style: normal; font-weight: 800;
  letter-spacing: .4px; color: #fff;
}
.lvl-col { flex: 1; min-width: 0; padding-right: 8px; }
.lvl-lab {
  font-size: 14px; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px;
}
.lvl-lab span { font-size: 16px; font-weight: 400; color: #ffffff80; }
.lvl-lab.svip-txt {
  background: linear-gradient(315.9deg, #11134A 14.1%, #6F58C7 88.09%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.lvl-lab.svip-txt span { -webkit-text-fill-color: #23206280; color: #23206280; }
.lvl-meter {
  height: 20px; background: #1E1839; border-radius: 15px; padding: 2px; position: relative;
}
.lvl-meter i {
  display: block; height: 100%; width: 0; border-radius: 15px;
  background: linear-gradient(90deg, #D676D0 0%, #EDB1C9 56.05%, #EDD2F3 96.95%);
}
.lvl-meter b {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  font-size: 8px; font-weight: 700; font-style: italic; color: #fff;
}
#p-grid .grid-card { margin-top: 0; border-radius: 0 0 20px 20px; }
.grid-card {
  margin: 0 12px 12px; background: #393580; border-radius: 20px; padding: 16px 8px 12px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 0; text-align: center; font-size: 12px;
}
.grid-card .ico { width: 42px; height: 42px; margin: 0 auto 6px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; object-fit: contain; }
.grid-card img.ico { background: transparent; }
.pv-hero { position: relative; height: 42vh; background: #1B1540; overflow: hidden; }
.pv-hero img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.pv-card { background: #0F0B53; border-radius: 0 0 30px 30px; padding: 16px 0 8px; }
.pv-card .home-name { padding: 0 20px 8px; }
.pv-tabs { display: flex; gap: 18px; padding: 16px 20px 8px; }
.pv-tabs div { color: #7a77b0; font-size: 14px; position: relative; }
.pv-tabs div.on { color: #fff; font-weight: 700; }
.pv-tabs div.on::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: -6px; height: 3px; background: #5F53FF; border-radius: 2px; }
.set-acc { margin: 0 16px 10px; background: #1F1D4A; border-radius: 15px; overflow: hidden; }
.set-acc-h { padding: 16px; }
.set-acc-b { display: none; }
.set-acc.open .set-acc-b { display: block; }
.set-acc-b div { padding: 12px 16px; color: #9D9AF9; font-size: 13px; border-top: 1px solid #373378; }
.set-logout {
  margin: 24px 16px; height: 50px; width: calc(100% - 32px); border-radius: 15px;
  background: #000; border: 1px solid #60192B; color: #FF567F; font-weight: 700; font-size: 14px;
}
.set-item.on { outline: 1px solid #5F53FF; }
.ed-sec { padding: 0 20px; margin-bottom: 20px; }
.ed-h { font-size: 14px; font-weight: 600; margin-bottom: 3px; }
.ed-sub { font-size: 12px; color: #9D9AF9; margin-bottom: 10px; }
.ed-photo {
  position: relative; min-height: 275px; background: #1E1B50; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ed-photo img { width: 100%; height: 275px; object-fit: cover; display: block; }
.ed-add { font-size: 40px; color: #CCD2E3; }
.ed-cam {
  position: absolute; top: 10px; right: 8px; width: 30px; height: 30px;
  background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.ed-box {
  background: #1E1B50; border-radius: 15px; padding: 0 8px; margin-bottom: 10px;
  display: flex; align-items: center; min-height: 45px;
}
.ed-box input, .ed-box select, .ed-box textarea {
  width: 100%; border: 0; background: transparent; color: #fff; font-size: 12px;
  font-weight: 500; outline: none; font-family: inherit; padding: 12px 10px;
}
.ed-box select option { background: #1E1B50; }
.ed-area { padding: 6px 8px; }
.ed-row { display: flex; align-items: center; gap: 6px; }
.ed-verify {
  flex-shrink: 0; height: 30px; border: 0; border-radius: 8px; padding: 0 10px;
  background: #5F53FF; color: #fff; font-size: 11px; font-weight: 700;
}
.ed-split { display: flex; gap: 10px; }
.ed-split .ed-box { flex: 1; }
.ed-titles { display: flex; gap: 10px; overflow-x: auto; }
.ed-none {
  min-width: 90px; height: 40px; border-radius: 30px; background: #1e1b50;
  display: flex; align-items: center; justify-content: center; color: #7D77C5; font-size: 14px; font-weight: 700;
}
.ed-hobbies { display: flex; flex-wrap: wrap; gap: 8px; }
.ed-hob {
  background: #1E1B50; padding: 10px 15px; border-radius: 30px; font-size: 12px;
}
.ed-hob.on { outline: 1px solid #5F53FF; }
.ed-hob.add { width: 50px; text-align: center; padding: 10px 0; }
.ed-soc { width: 20px; height: 20px; margin-left: 6px; }
.ed-save { display: flex; justify-content: center; padding: 10px 20px 30px; }
.ed-update {
  width: 250px; height: 50px; border: 0; border-radius: 30px; color: #fff; font-size: 17px; font-weight: 700;
  background: linear-gradient(100.25deg, #DA81E5 29.74%, #9D9AF9 74.59%), #482AFF;
}

.rec-page { min-height: 100vh; background: #0B0931; padding-bottom: 24px; }
.rec-hero {
  height: 300px; background-size: cover; background-position: center; position: relative;
  padding: 8px 15px 16px; display: flex; flex-direction: column;
}
.rec-back { position: relative; z-index: 3; }
.rec-circle {
  width: 88px; height: 88px; margin: 4px auto 16px; border-radius: 50%;
  padding: 4px; background: conic-gradient(#9D9AF9, #DA81E5, #5F53FF, #9D9AF9);
  box-shadow: 0 0 18px #9D9AF980;
}
.rec-circle img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #0B0931; display: block; }
.rec-song { font-size: 20px; font-weight: 700; }
.rec-by { font-size: 13px; font-weight: 500; color: #ffffffb3; margin-top: 2px; }
.rec-player { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.rec-play {
  width: 32px; height: 32px; border: 0; background: transparent; color: #fff; font-size: 18px;
}
.rec-line { flex: 1; height: 3px; background: #ffffff55; border-radius: 4px; overflow: hidden; }
.rec-line i { display: block; width: 0; height: 100%; background: #fff; }
.rec-time { font-size: 12px; min-width: 36px; text-align: right; }
.rec-tools {
  display: flex; align-items: center; gap: 10px; padding: 15px;
  background: #0B0931; position: sticky; top: 0; z-index: 4;
}
.rec-search {
  flex: 1; height: 43px; background: #393580; border-radius: 30px;
  display: flex; align-items: center; padding: 0 12px; gap: 6px; color: #9D9AF9;
}
.rec-search input { flex: 1; border: 0; background: transparent; color: #fff; outline: none; font-size: 14px; }
.rec-hist {
  width: 117px; height: 43px; border: 1px solid #5F53FF; border-radius: 30px; background: #000;
  display: flex; align-items: center; justify-content: center; color: #5F53FF; font-size: 14px;
}
.rec-day { padding: 12px 15px 6px; font-size: 16px; font-weight: 700; }
.rec-item {
  display: flex; align-items: flex-start; padding: 12px 15px; gap: 10px;
  border-bottom: 1px solid #1A175B;
}
.rec-item.on { background: linear-gradient(270deg, #393580 0%, rgba(57,53,128,0) 100%); }
.rec-item img { width: 65px; height: 65px; border-radius: 15px; object-fit: cover; background: #1E1B50; }
.rec-item .meta { flex: 1; min-width: 0; }
.rec-item .sn { font-size: 14px; font-weight: 500; margin-bottom: 3px; }
.rec-item .sm { font-size: 12px; color: #9D9AF9; margin-bottom: 6px; }
.rec-item .row { display: flex; align-items: center; justify-content: space-between; }
.rec-playing {
  min-width: 90px; height: 25px; padding: 0 8px; background: #0B0931; border-radius: 30px;
  display: flex; align-items: center; gap: 6px; font-size: 11px;
}
.rec-playing img { width: 21px; height: 21px; border-radius: 0; }
.rec-score { display: flex; align-items: center; gap: 4px; font-size: 22px; font-weight: 700; margin-left: auto; }
.rec-score img { height: 18px; width: auto; object-fit: contain; border-radius: 0; }
.svip-card { margin: 16px; background: #393581; border-radius: 24px; padding: 24px 18px; text-align: center; }
.svip-lv { font-size: 36px; font-weight: 800; }
.svip-bar { height: 12px; background: #1E1839; border-radius: 20px; margin: 16px 0 10px; overflow: hidden; }
.svip-bar i { display: block; width: 8%; height: 100%; background: linear-gradient(90deg,#D676D0,#EDD2F3); }
.svip-hint { color: #9D9AF9; font-size: 13px; }
.other {
  margin: 0 12px; background: #393580; border-radius: 20px; padding: 8px 4px 8px 8px;
}
.other h4 { margin: 8px 12px 4px; font-size: 14px; }
.other-row {
  display: flex; align-items: center; gap: 10px; padding: 12px 12px; font-size: 14px;
}
.other-row .ch { margin-left: auto; color: #9D9AF9; }
.ver { text-align: center; color: #5a5794; font-size: 11px; padding: 16px; }

/* inner pages */
.subhead {
  display: flex; align-items: center; justify-content: space-between; padding: 12px 10px;
  position: sticky; top: 0; background: #0B0931; z-index: 5;
}
.back { width: 36px; font-size: 26px; color: #fff; background: none; border: 0; }
.subhead h2 { margin: 0; font-size: 16px; font-weight: 600; }
.vg-chip {
  display: grid; grid-template-columns: 25px minmax(20px, auto) 25px; align-items: center; gap: 8px;
  background: #272462; border-radius: 30px; padding: 2px 2px 2px 8px; font-weight: 600; font-size: 15px;
}
.vg-chip img { width: 23px; height: 23px; }
.vg-chip .add {
  width: 23px; height: 23px; border-radius: 50%; background: #5F53FF;
  display: flex; align-items: center; justify-content: center;
}
.cr-chip {
  display: flex; align-items: center; gap: 6px;
  background: #272462; border-radius: 30px; padding: 4px 12px 4px 8px;
  font-weight: 600; font-size: 15px;
}
.cr-chip img { width: 23px; height: 23px; }
.gift-chips { display: flex; gap: 8px; align-items: center; }
.gift-page { padding-bottom: 80px; }
.sel-perf { padding: 4px 16px 8px; font-size: 16px; font-weight: 700; }
.search-bar {
  margin: 0 12px 10px; height: 38px; border-radius: 12px; border: 0; background: #1b1848;
  color: #fff; padding: 0 14px; width: calc(100% - 24px); font-size: 14px; outline: none;
}
.song-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px; margin: 8px 10px; background: #1b1848; border-radius: 16px;
}
.song-item b { display: block; font-size: 14px; }
.song-item small { color: #9D9AF9; font-size: 12px; }
.song-item button {
  border: 0; background: #5F53FF; color: #fff; border-radius: 20px; padding: 8px 14px; font-weight: 700;
}
.g-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 10px 12px 90px; }
.g-item { text-align: center; }
.g-item img { width: 100%; aspect-ratio: 1.1; object-fit: cover; border-radius: 10px; background: #1a1648; }
.g-item .nm { font-size: 11px; margin-top: 4px; }
.g-price {
  margin: 4px auto 0; width: fit-content; padding: 3px 10px; background: #48439E; border-radius: 30px;
  font-size: 13px; display: flex; align-items: center; gap: 4px;
}
.g-price img { width: 14px; height: 14px; }
.empty { text-align: center; color: #9D9AF9; padding: 40px 20px; }
.empty-ico { font-size: 48px; margin-bottom: 12px; opacity: .55; }
.sub-page { min-height: 100vh; background: #0B0931; padding-bottom: 24px; }
.sub-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 12px; background: #1C1A4A; position: sticky; top: 0; z-index: 8;
}
.sub-bar h2 { margin: 0; font-size: 18px; font-weight: 500; flex: 1; text-align: center; }
.tabs-line { display: flex; background: #1C1A4A; }
.tabs-line span {
  flex: 1; text-align: center; padding: 12px 0; font-size: 14px; color: #7a77b0; position: relative;
}
.tabs-line span.on { color: #fff; }
.tabs-line span.on::after {
  content: ""; position: absolute; left: 18%; right: 18%; bottom: 0; height: 2px; background: #6d62ff;
}
.pill-row { display: flex; gap: 8px; overflow-x: auto; padding: 12px 14px; scrollbar-width: none; }
.pill-row::-webkit-scrollbar { display: none; }
.pill {
  flex-shrink: 0; height: 32px; padding: 0 14px; border-radius: 20px; background: #2a2468;
  color: #cfcfff; font-size: 12px; display: flex; align-items: center;
}
.pill.on { background: #5F53FF; color: #fff; }
.gal-sec { padding: 0 14px 8px; }
.gal-sec h3 {
  margin: 8px 0 10px; font-size: 16px; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
}
.gal-sec h3::after { content: ""; flex: 1; height: 1px; background: #9D9AF9; }
.gal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gal-card img { width: 100%; height: 110px; object-fit: cover; border-radius: 10px; display: block; background: #1a1648; }
.hero {
  width: 100%; height: 280px; object-fit: cover; display: block; background: #282466;
}
.prod-body { padding: 16px; }
.tag-self {
  display: inline-flex; align-items: center; height: 26px; padding: 0 12px;
  border-radius: 9px; background: #282466; font-size: 12px;
}
.price-vp { color: #f6e408; font-weight: 800; }
.cta {
  margin: 18px 16px 10px; height: 46px; border: 0; border-radius: 30px; width: calc(100% - 32px);
  background: linear-gradient(100deg, #DA81E5 30%, #9D9AF9 75%), #5F53FF;
  color: #fff; font-size: 16px; font-weight: 700;
}
.field {
  margin: 0 16px 14px; background: #1e1b50; border-radius: 16px; padding: 12px 14px;
}
.field label { display: block; font-size: 12px; color: #9D9AF9; margin-bottom: 6px; }
.field input, .field textarea, .field select {
  width: 100%; border: 0; background: transparent; color: #fff; font-size: 14px; outline: none; font-family: inherit;
}
.add-photo {
  width: 110px; height: 90px; margin: 0 16px; border-radius: 12px; background: #1e1b50;
  display: flex; align-items: center; justify-content: center; font-size: 28px; color: #9D9AF9;
}
.friend-card { margin: 12px 16px; background: #2a2468; border-radius: 16px; padding: 12px; display: flex; align-items: center; gap: 10px; }
.badge-hero {
  background: linear-gradient(180deg, #6d4dff, #3a2a8a); padding: 16px 16px 0; min-height: 140px;
  display: flex; justify-content: space-between; align-items: flex-end;
}
.badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 8px; padding: 20px 10px; text-align: center; }
.badge-grid .nm { font-size: 11px; color: #8b88c8; margin-top: 6px; }
.qr-card { margin: 24px 20px; background: #393580; border-radius: 30px; overflow: hidden; }
.qr-card .top { background: #7059FF; padding: 12px 16px; display: flex; align-items: center; gap: 10px; }
.qr-box { width: 220px; height: 220px; margin: 24px auto; background: #fff; border-radius: 15px; padding: 8px; }
.scan-frame {
  margin: 40px auto; width: 240px; height: 240px; border: 2px solid #5F53FF; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; color: #9D9AF9;
}
.set-item {
  margin: 0 16px 10px; background: #1F1D4A; border-radius: 15px; padding: 16px; display: flex; justify-content: space-between;
}
.danger { color: #F64E38; }

.map-page {
  min-height: 100vh;
  background: #c9b8ff url(/assets/imgs/vsing_map_A.webp) center 30%/cover no-repeat;
  position: relative;
  padding-bottom: 20px;
}
.map-user {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px 0;
}
.map-user img { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.4); object-fit: cover; }
.map-fabs { margin-left: auto; display: flex; flex-direction: column; gap: 8px; }
.map-fabs div {
  width: 40px; height: 40px; border-radius: 50%; background: #393580;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
}
.map-sheet {
  position: absolute; left: 10px; right: 10px; bottom: 16px;
  background: #1B194A; border-radius: 30px; padding: 20px;
}
.map-hello { font-size: 24px; font-weight: 600; }
.store-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; top: 120px;
  background: #1B194A; border-radius: 30px 30px 0 0; padding: 16px 12px 20px;
  overflow: auto; z-index: 20;
}
.store-tabs { display: flex; justify-content: space-around; margin: 8px 0 12px; font-size: 13px; color: #9D9AF9; }
.store-tabs .on { color: #fff; border-bottom: 2px solid #6d62ff; padding-bottom: 8px; }
.st-row {
  display: flex; gap: 10px; padding: 10px 8px; border-radius: 14px; margin-bottom: 6px;
}
.st-row.on { background: #2a2468; }
.st-row img, .st-row .ph {
  width: 54px; height: 54px; border-radius: 10px; object-fit: cover; background: #0B0931; flex-shrink: 0;
}
.st-row .ph { display: flex; align-items: center; justify-content: center; }
.st-row b { display: block; font-size: 14px; }
.st-row small { color: #9D9AF9; font-size: 11px; line-height: 1.35; }
.st-km { margin-left: auto; font-size: 11px; color: #cfcfff; white-space: nowrap; }
.here-tag {
  display: inline-block; margin-top: 4px; background: #ff4db0; border-radius: 10px;
  padding: 2px 8px; font-size: 10px;
}
.home-avatar-wrap, .home-lv, .home-lead { cursor: pointer; }
.lv-how { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: #9D9AF9; font-size: 14px; }
.lv-bubble {
  width: 55px; height: 55px; border-radius: 50%; background: #393580; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-weight: 700; color: #9D9AF9;
}
.pack-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pack-card {
  background: #1B1849; border-radius: 16px; overflow: hidden; position: relative; min-height: 140px;
}
.pack-card .gem { padding: 16px 14px 8px; font-size: 22px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.pack-card .gem img { width: 28px; height: 28px; }
.pack-card .deco { position: absolute; right: -12px; top: 18px; width: 88px; opacity: .95; }
.pack-card .pay {
  background: #5F53FF; text-align: center; padding: 10px; font-weight: 700; font-size: 14px;
}
.pack-card .bonus {
  position: absolute; left: 0; top: 52px; background: #5E58BD; color: #00D9D9;
  font-size: 11px; padding: 3px 10px; clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
}
.pack-scroll { display: flex; gap: 10px; overflow-x: auto; padding: 8px 4px 12px; scrollbar-width: none; }
.pack-scroll::-webkit-scrollbar { display: none; }
.pack-mini {
  flex: 0 0 110px; background: #191652; border-radius: 14px; padding: 10px 8px; text-align: center;
}
.pack-mini img { height: 44px; object-fit: contain; }
.pack-mini b { display: block; font-size: 18px; margin: 6px 0 8px; }
.pack-mini .pay { background: #5F53FF; border-radius: 0 0 12px 12px; margin: 0 -8px -10px; padding: 8px; font-size: 12px; font-weight: 700; }
.lb-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 30px;
}
.lb-row .rk {
  width: 25px; min-width: 25px; font-size: 14px; font-weight: 600; color: #433F91; margin-right: 10px; text-align: center;
}
.lb-row .avwrap { width: 40px; height: 40px; position: relative; flex-shrink: 0; }
.lb-row .avwrap img.av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.lb-row .avwrap img.badge { width: 22px; height: 22px; position: absolute; bottom: -8px; left: -5px; }
.lb-row .who { display: flex; flex-direction: column; margin-left: 10px; min-width: 0; }
.lb-row .who .meta { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.lb-row .who .meta img { height: 16px; object-fit: contain; }
.lb-row .who .nm { font-size: 14px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-row .val { font-size: 14px; font-weight: 700; color: #5f53ff; flex-shrink: 0; margin-left: 10px; }
.lb-page { background: #0B0931; }
.lb-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px; background: #0B0931;
}
.lb-tabs { width: 60%; display: flex; justify-content: center; gap: 28px; }
.lb-tab { font-size: 14px; color: rgba(255,255,255,.45); text-align: center; }
.lb-tab.on { color: #fff; }
.lb-tab i {
  display: none; width: 20px; height: 3px; background: #5F53FF; margin: 6px auto 0;
}
.lb-tab.on i { display: block; }
.lb-countries {
  display: flex; gap: 16px; overflow-x: auto; padding: 0 15px 12px; scrollbar-width: none;
}
.lb-chip { flex-shrink: 0; font-size: 13px; color: rgba(255,255,255,.45); padding-bottom: 6px; }
.lb-chip.on { color: #fff; border-bottom: 2px solid #5F53FF; }
.lb-period-wrap { display: flex; justify-content: flex-end; padding: 0 15px 8px; z-index: 4; }
.lb-period-wrap select {
  appearance: none; -webkit-appearance: none;
  height: 32px; background: #482AFF; color: #fff; border: 0; border-radius: 30px;
  padding: 0 28px 0 14px; font-size: 14px; font-weight: 500;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='white' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.podium-wrap {
  width: 100%; height: 400px; display: flex; justify-content: center; align-items: flex-end; position: relative;
}
.stage {
  width: 100%; height: 300px; position: relative;
  background: url(/assets/topup/stage.png) center / contain no-repeat;
}
.lb-list { padding: 0 20px 24px; margin-top: -20px; }
.p_title { font-size: 16px; font-weight: 700; }
.tu-head { display:flex;align-items:center;gap:8px;padding:10px 10px 6px;background:#1C1A4A }
.tu-gem {
  flex:1;height:44px;border-radius:30px;background:#393580;display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:13px
}
.tu-clock { width:44px;height:44px;border-radius:50%;background:#393580;display:flex;align-items:center;justify-content:center;color:#9D9AF9 }
.tu-group { padding:16px 14px 8px }
.tu-group h3 { margin:0 0 12px;font-size:16px }
.tu-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px }
.tu-card {
  background:linear-gradient(180deg,#3a3480,#2a2668);border-radius:18px;overflow:hidden;position:relative;min-height:118px;padding:16px 12px 0
}
.tu-card .amt { font-size:22px;font-weight:800;display:flex;align-items:center;gap:4px }
.tu-card .amt img { width:18px }
.tu-card .cr { position:absolute;right:8px;top:18px;width:52px;opacity:.9 }
.tu-bonus {
  display:inline-block;margin-top:8px;background:#f5a623;color:#fff;font-size:11px;font-weight:700;
  padding:3px 10px 3px 8px;clip-path:polygon(0 0,88% 0,100% 50%,88% 100%,0 100%)
}
.tu-svip {
  position:absolute;top:-8px;right:10px;background:#0d3d32;color:#7dffc4;border:1px solid #2ea87a;
  border-radius:8px;font-size:10px;padding:3px 8px;z-index:2
}
.tu-pay {
  margin-top:14px;background:linear-gradient(90deg,#ff7ad9,#c9a0ff);text-align:center;padding:10px;
  border-radius:0 0 18px 18px;font-weight:700;font-size:14px
}
.svip-dock {
  position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:430px;
  background:#16133a;display:flex;align-items:center;padding:10px 14px;border-top:1px solid #2a2668;z-index:30
}
.podium { position:relative;height:320px;margin:8px 0 12px }
.podium-bg { position:absolute;left:8%;right:8%;bottom:0;width:84%;height:210px;object-fit:contain }
.pod { position:absolute;width:33%;text-align:center;display:flex;flex-direction:column;align-items:center }
.pod .pod-meta { display:flex;align-items:center;gap:4px;margin-bottom:4px;min-height:16px }
.pod .pod-meta .flag { width:18px;height:22px;object-fit:contain }
.pod .pod-meta .title { height:14px;object-fit:contain }
.pod .pod-av { width:70px;height:70px;position:relative }
.pod .av { width:70px;height:70px;border-radius:50%;object-fit:cover;background:#1b1540 }
.pod .badge { width:22px;height:22px;object-fit:contain;position:absolute;bottom:-4px;left:-4px }
.pod .nm {
  width:100%; font-size:14px; font-weight:400; color:#fff; margin:4px 0 2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pod .sc {
  font-size:14px; font-weight:700;
  background: linear-gradient(180deg, #EBDDC5 0%, #E1C497 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.pod.p1 { left:50%; top:20%; transform:translate(-50%,-50%) }
.pod.p2 { left:15%; top:35%; transform:translate(-50%,-50%) }
.pod.p3 { left:85%; top:45%; transform:translate(-50%,-50%) }
.perf-bar {
  margin: 0 10px 12px; background: #393580; border-radius: 20px;
  padding: 10px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.perf {
  width: 45px; height: 45px; border-radius: 50%; background: #7E78E1;
  display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff;
}
.perf.on {
  padding: 3px;
  background: linear-gradient(90deg, #DA81E5 0%, #9D9AF9 100%);
  box-shadow: 0 0 10px 3px rgba(117,109,255,1);
}
.perf img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.gift-dock {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0;
  width: 100%; max-width: 430px;
  background: linear-gradient(90.27deg, #7C3FFF 0.16%, #4440FF 99.7%);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 7px 27px 3px rgba(117,109,255,1);
  display: flex; align-items: center; gap: 10px;
  padding: 10px 15px; z-index: 30;
}
.gift-dock img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.gift-dock b { font-size: 14px; font-weight: 700; }
.gift-dock span { font-size: 16px; font-weight: 500; }
.gsec { padding: 4px 16px 12px }
.gsec h3 {
  font-size: 18px; font-weight: 600; margin: 8px 0 10px;
  display: flex; align-items: center; gap: 10px;
}
.gsec h3::after { content: ""; flex: 1; height: 1px; background: #9D9AF9 }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px }
.g2 .g-card { position: relative }
.g2 .g-card img.thumb {
  width: 100%; height: 125px; object-fit: cover; border-radius: 10px;
  display: block; background: #1a1648;
}
.g-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 80;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.g-modal[hidden] { display: none !important; }
.g-sheet { width: 86%; max-width: 340px; }
.g-sheet > img { width: 100%; border-radius: 16px 16px 0 0; display: block; }
.g-sheet-body { background: #272279; border-radius: 0 0 30px 30px; padding: 10px 10px 20px; margin-top: -8px; }
.g-sheet-row {
  display: flex; align-items: center; justify-content: space-between;
  background: #3C36A2; border-radius: 20px; padding: 15px;
}
.g-sheet-price { display: flex; align-items: center; gap: 6px; color: #FFD600; font-weight: 700; }
.g-sheet-price img { width: 22px; }
.g-sheet-btns { display: flex; justify-content: space-between; padding: 15px 8px 0; gap: 12px; }
.g-cancel {
  width: 90px; height: 40px; border-radius: 30px; background: #0B0931;
  border: 1px solid #5F53FF; color: #5F53FF; font-weight: 600;
}
.g-go {
  flex: 1; height: 40px; border: 0; border-radius: 30px; color: #fff; font-weight: 600;
  background: linear-gradient(100.25deg, #DA81E5 29.74%, #9D9AF9 74.59%), #5F53FF;
}
.led { margin: 0 15px 30px; }
.led-d { padding: 15px 5px 10px; color: silver; font-size: 12px; font-weight: 700; }
.led-row {
  padding: 15px; background: rgba(255,255,255,.1); border-radius: 5px;
  display: flex; justify-content: space-between; align-items: center;
}

.bag-empty {
  padding-top: 90px; text-align: center; color: #9D9AF9; font-size: 14px;
}
.bag-ico { width: 56px; height: 56px; margin: 0 auto 16px; display: block; opacity: .85; }
.bag-back {
  margin-top: 18px; height: 36px; padding: 0 28px; border-radius: 20px;
  border: 1px solid #7a6dff; background: transparent; color: #c9b8ff; font-size: 14px;
}
.fr-page { background: #0B0931; padding-bottom: 24px; }
.fr-head { padding: 10px 8px 0; }
.fr-me {
  margin: 0 15px 10px; background: #393580; border-radius: 15px; padding: 10px;
}
.fr-me-top {
  display: flex; align-items: center; gap: 10px; padding: 5px 10px 10px;
  border-bottom: 1px solid #5651AE;
}
.fr-me-top img { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; background: #2a2668; }
.fr-me-top b { flex: 1; font-size: 14px; }
.fr-edit {
  height: 25px; padding: 0 10px; background: #7069E5; border-radius: 30px;
  font-size: 12px; display: flex; align-items: center;
}
.fr-incog {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 10px 5px; font-size: 12px;
}
.ios-tog { position: relative; width: 40px; height: 22px; }
.ios-tog input { display: none; }
.ios-tog i {
  display: block; width: 40px; height: 22px; border-radius: 20px; background: #0B0931;
  position: relative;
}
.ios-tog i::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: .15s;
}
.ios-tog input:checked + i { background: #5F53FF; }
.ios-tog input:checked + i::after { left: 20px; }
.fr-search {
  margin: 10px 15px 0; height: 42px; background: #1E1B4D; border-radius: 25px 25px 0 0;
  display: flex; align-items: center; gap: 8px; padding: 0 14px; color: #9D9AF9;
}
.fr-search input { flex: 1; border: 0; background: transparent; color: #fff; outline: none; font-size: 14px; }
.fr-tabs {
  display: flex; gap: 20px; padding: 12px 20px 8px; background: #1E1B4D;
}
.fr-tab { font-size: 14px; color: rgba(255,255,255,.45); }
.fr-tab.on { color: #fff; }
.fr-tab i { display: none; width: 25px; height: 3px; background: #5F53FF; margin-top: 6px; }
.fr-tab.on i { display: block; }
.fr-grid { padding: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 8px; background: #1E1B4D; min-height: 50vh; }
.fr-pic { height: 180px; border-radius: 15px; overflow: hidden; background: #393580; }
.fr-pic img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.fr-chat {
  margin-top: 8px; height: 33px; width: fit-content; min-width: 88px; padding: 0 14px;
  background: #393580; border-radius: 30px;
  display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 13px;
}
.fr-chat img { width: 18px; height: 18px; }
.sc-page { padding-bottom: 90px; }
.sc-top { display: flex; align-items: center; gap: 10px; padding: 8px 15px; }
.sc-vg {
  flex: 1; height: 49px; border-radius: 30px; background: #272462;
  display: flex; align-items: center; justify-content: space-between; padding: 0 15px; font-size: 14px;
}
.sc-amt { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.sc-amt img { width: 17px; }
.sc-paybtn {
  width: 70px; height: 49px; background: #5F53FF; border-radius: 30px;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
}
.sc-swiper {
  display: flex; gap: 12px; overflow-x: auto; padding: 8px 20px 16px; scrollbar-width: none;
}
.sc-swiper::-webkit-scrollbar { display: none; }
.sc-swiper img {
  flex: 0 0 82%; height: 160px; object-fit: cover; border-radius: 16px; background: #1a1648;
}
.sc-field { padding: 8px 15px 4px; }
.sc-field label { display: block; font-size: 14px; margin-bottom: 8px; }
.sc-box {
  height: 48px; background: #242158; border-radius: 16px; padding: 0 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.sc-area {
  width: 100%; min-height: 110px; background: #242158; border: 0; border-radius: 16px;
  color: #fff; padding: 12px 14px; font-family: inherit; font-size: 14px; outline: none; resize: none;
}
.sc-add {
  width: 32%; height: 107px; background: #242158; border-radius: 20px;
  display: flex; align-items: center; justify-content: center; font-size: 36px; color: #9D9AF9;
}
.sc-dock {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0;
  width: 100%; max-width: 430px; padding: 12px 15px 16px; background: #0B0931; border-top: 1px solid #2E288E;
}
.sc-cta {
  width: 100%; height: 47px; border: 0; border-radius: 30px; color: #fff; font-size: 18px; font-weight: 700;
  background: linear-gradient(100deg, #DA81E5 29.74%, #9D9AF9 74.59%);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.sc-cta img { width: 22px; }
.song-page { background: #0B0931; padding-bottom: 20px; }
.song-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.song-search {
  flex: 1; height: 40px; background: #1b1848; border-radius: 20px;
  display: flex; align-items: center; padding: 0 14px;
}
.song-search input {
  width: 100%; border: 0; background: transparent; color: #fff; outline: none; font-size: 14px;
}
.song-filters { display: flex; gap: 8px; padding: 0 14px 10px; overflow-x: auto; }
.song-price { padding: 0 16px 6px; color: #9D9AF9; font-size: 12px; }
.song-col { margin-bottom: 8px; }
.song-col-h {
  display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 6px;
}
.song-col-h .title { font-size: 16px; font-weight: 700; }
.song-col-h .more { font-size: 13px; color: #9D9AF9; }
.song-row {
  display: flex; gap: 12px; overflow-x: auto; padding: 0 16px 12px; scrollbar-width: none;
}
.song-row::-webkit-scrollbar { display: none; }
.song-box { flex: 0 0 92px; width: 92px; }
.song-box img {
  width: 92px; height: 92px; border-radius: 16px; object-fit: cover; display: block; background: #1b1848;
}
.song-box .sn {
  margin-top: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.song-box .an {
  font-size: 11px; color: #9D9AF9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.song-line {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
}
.song-line img { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; background: #1b1848; }
.song-line .info { flex: 1; min-width: 0; }
.song-line .sn { font-size: 14px; font-weight: 700; }
.song-line .an { font-size: 12px; color: #9D9AF9; }
.song-line .heart { color: #5F53FF; font-size: 20px; padding: 6px; }
.vs-mic.on .sing_btn_text { color: #fff; }
.song-go {
  width: 36px; height: 36px; border: 0; border-radius: 50%; background: #5F53FF; color: #fff; font-size: 18px;
}
.q-page { padding-bottom: 100px; background: #0B0931; }
.q-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 0; }
.q-vg {
  height: 31px; padding: 0 8px 0 28px; border: 1px solid #393580; border-radius: 30px;
  display: flex; align-items: center; gap: 6px; position: relative; font-weight: 700;
}
.q-vg img { width: 34px; height: 34px; position: absolute; left: -10px; top: -2px; }
.q-plus { color: #9D9AF9; font-size: 20px; }
.q-songrow { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px 18px; gap: 8px; }
.q-songpill {
  flex: 1; min-width: 0; display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 8px;
  background: #393580; border-radius: 30px; padding: 4px 10px 4px 4px;
}
.q-songpill img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.q-songpill .sn { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-songpill .an { font-size: 12px; color: #9D9AF9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-mode {
  width: 124px; height: 52px; border: 1px solid #5F53FF; border-radius: 30px;
  display: flex; align-items: center; position: relative; flex-shrink: 0;
}
.q-knob {
  position: absolute; left: 0; top: 0; width: 50%; height: 100%;
  background: #482AFF; border: 4px solid #0B0931; border-radius: 30px; transition: left .2s;
}
.q-mode.duet .q-knob { left: 50%; }
.q-opt {
  width: 50%; height: 100%; display: flex; align-items: center; justify-content: center;
  z-index: 2; font-size: 12px; font-weight: 700; color: #5F53FF; cursor: pointer;
}
.q-opt.on { color: #fff; }
.q-duet { padding: 0 15px 16px; }
.q-user {
  min-height: 63px; background: #393580; border-radius: 30px; padding: 5px 10px 5px 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.q-add { width: 41px; height: 41px; border-radius: 50%; background: #4E49A6; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.q-sec { padding: 0 10px 20px; }
.q-sec-h { display: flex; align-items: center; justify-content: space-between; padding: 0 5px 10px; }
.q-sec-t { font-size: 16px; font-weight: 700; }
.q-theme-name {
  height: 32px; padding: 0 10px; border: 1px solid #5F53FF; border-radius: 25px;
  display: flex; align-items: center; gap: 5px; color: #5F53FF; font-size: 12px; font-weight: 700;
}
.q-themes { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.q-theme { position: relative; }
.q-theme img { width: 100%; height: 80px; object-fit: cover; border-radius: 5px; display: block; background: #1b1848; }
.q-theme.on::after {
  content: "✓"; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 32px; height: 32px; border-radius: 50%; background: #00FFA3; color: #000;
  display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.q-buy {
  position: absolute; right: 0; bottom: 5px;
  padding: 2px 6px 2px 3px; background: #3F8FF0; border-radius: 30px 0 0 30px;
  display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600;
}
.q-buy i {
  width: 14px; height: 14px; border-radius: 50%; background: #fff; color: #4D70E7;
  display: flex; align-items: center; justify-content: center; font-size: 10px; font-style: normal;
}
.th-sheet { width: 86%; max-width: 360px; background: #393580; border-radius: 15px; overflow: hidden; }
.th-sheet img { width: 100%; height: 180px; object-fit: cover; display: block; }
.th-name { padding: 12px 14px 0; font-weight: 700; }
.th-btns { display: flex; gap: 10px; padding: 12px 14px 16px; }
.th-btns .g-go { display: flex; align-items: center; justify-content: center; gap: 6px; }
.th-btns .g-go img { width: 16px; height: 16px; }
.q-dock {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 430px;
  background: #1F1C51; padding: 12px 15px 16px; display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid #2E288E; z-index: 30;
}
.q-total-l { font-size: 12px; color: #9D9AF9; }
.q-total { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 4px; }
.q-total img { width: 16px; }
.q-now {
  width: 140px; height: 45px; border: 0; border-radius: 30px; color: #fff; font-weight: 700;
  background: linear-gradient(100.25deg, #DA81E5 29.74%, #9D9AF9 74.59%), #5F53FF;
}

img[src=""], img[data-dyn-src] { display: none !important; }
.wrapped-header, ion-refresher, ion-modal, ng-template { display: none !important; }

.ion-content {
  min-height: 100vh;
  background: #0B0931;
  color: #fff;
  overflow-y: auto;
}
.ion-header, .ion-toolbar { background: #0B0931; color: #fff; }
.ion-button {
  background: transparent; border: 0; color: #fff; padding: 0;
  font-family: inherit; cursor: pointer;
}
.ion-icon { display: inline-flex; align-items: center; justify-content: center; }

.auth-page { display: flex; flex-direction: column; min-height: 100vh; background: #0B0931; }
.auth-top { padding: 16px 12px; }
.auth-center { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-card {
  width: 100%; max-width: 340px; background: #1F1D4A; border-radius: 24px;
  padding: 28px 22px 32px; text-align: center;
}
.auth-title { font-size: 22px; font-weight: 700; margin-bottom: 10px; }
.auth-instruction { font-size: 13px; color: #9D9AF9; line-height: 1.5; }
.auth-code {
  margin: 28px 0 16px; font-size: 42px; letter-spacing: 8px; font-weight: 800; color: #fff;
}
.auth-regen { font-size: 13px; color: #7D77C5; }

.hp-page { min-height: 100vh; background: #0D112D; position: relative; padding-bottom: 40px; }
.hp-bg { width: 100%; display: block; }
.hp-body { position: absolute; top: 0; left: 0; right: 0; padding: 18px 0 40px; }
.hp-close {
  width: 32px; height: 32px; margin: 0 16px 8px; border: 0; background: transparent;
  color: #fff; font-size: 18px; cursor: pointer;
}
.hp-title { width: 85%; display: block; margin: 0 auto 8px; }
.hp-h { font-size: 14px; font-weight: 700; padding: 10px 20px; }
.hp-feat {
  display: flex; gap: 12px; overflow-x: auto; padding: 0 16px 8px; scrollbar-width: none;
}
.hp-feat::-webkit-scrollbar { display: none; }
.hp-feat .hp-item { min-width: 78%; }
.hp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 15px; }
.hp-item { background: #2E2686; border-radius: 15px; overflow: hidden; cursor: pointer; }
.hp-pic {
  height: 140px; background: #1a1648; display: flex; align-items: center; justify-content: center;
}
.hp-feat .hp-pic { height: 180px; }
.hp-pic img { max-width: 86%; max-height: 86%; object-fit: contain; }
.hp-meta { padding: 8px 10px 10px; }
.hp-nm { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-cost { display: flex; align-items: center; gap: 4px; color: #ABA1FE; font-size: 12px; font-weight: 700; }
.hp-cost img { width: 22px; height: 22px; }

.legal { padding: 8px 20px 40px; font-size: 13px; line-height: 1.7; color: #ddd; }
.legal p { margin: 0 0 12px; }
.cs-card {
  margin: 0 16px 14px; background: #1E1B50; border-radius: 15px; padding: 16px 18px;
}
.cs-name { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.cs-addr { font-size: 13px; color: #7D77C5; line-height: 1.5; }

.ref-page { background: #0B0931 url(/assets/imgs/referral_bg.jpg) center/cover no-repeat; }
.ref-head { position: relative; padding: 16px 16px 0; min-height: 280px; }
.ref-copy { font-size: 22px; font-weight: 800; line-height: 1.3; width: 58%; }
.ref-head > img {
  position: absolute; right: 12px; top: 40px; width: 150px; pointer-events: none;
}
.ref-card {
  margin-top: 70px; background: linear-gradient(#A9E7F1, #859CEA, #807CFF);
  border-radius: 24px; padding: 6px;
}
.ref-card > div:first-child, .ref-row, .ref-qr { background: #393580; }
.ref-card > .ref-lab {
  background: #393580; border-radius: 20px 20px 0 0; padding: 12px 16px 4px; font-size: 14px;
}
.ref-row {
  display: flex; align-items: center; gap: 8px; padding: 0 12px 12px; background: #393580;
}
.ref-code {
  flex: 1; height: 36px; background: #6862CD; border-radius: 30px;
  display: flex; align-items: center; padding: 0 12px; font-weight: 700;
}
.ref-row button {
  height: 36px; min-width: 88px; border: 0; border-radius: 30px; color: #fff; font-weight: 700;
  background: linear-gradient(100deg, #DA81E5 30%, #9D9AF9 75%), #482AFF;
}
.ref-qr { text-align: center; padding: 0 0 12px; font-size: 12px; text-decoration: underline; background: #393580; border-radius: 0 0 20px 20px; }
.ref-body { margin-top: 16px; background: #393580; border-radius: 20px 20px 0 0; min-height: 40vh; }
.ref-h { padding: 18px 20px 0; font-size: 16px; }

.promo-card {
  margin: 20px 16px; background: linear-gradient(160deg, #A9E7F1, #859CEA, #807CFF);
  border-radius: 20px; padding: 6px; box-shadow: 0 6px 0 #292a85;
}
.promo-tab {
  background: #B5E0FF; color: #5D91DE; font-weight: 700; border-radius: 16px 16px 0 0;
  padding: 8px 14px; width: fit-content;
}
.promo-row {
  background: linear-gradient(#B5E0FF, #91BCFF); border-radius: 0 16px 16px 16px;
  padding: 12px; display: flex; gap: 8px;
}
.promo-row input {
  flex: 1; height: 39px; border: 0; border-radius: 30px; background: #82b4ff;
  text-align: center; color: #3268b9; font-size: 14px;
}
.promo-row button {
  width: 105px; height: 39px; border: 0; border-radius: 30px; color: #fff; font-weight: 700;
  background: linear-gradient(100deg, #DA81E5 30%, #9D9AF9 75%), #482AFF;
}

.tut-hero { text-align: center; padding: 40px 24px 10px; }
.tut-h { font-size: 28px; font-weight: 800; margin-bottom: 24px; }
.tut-hero img { width: 120px; margin: 10px auto 18px; display: block; }
.tut-sub { color: #9D9AF9; font-size: 14px; }