/* === Global === */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }

/* ========================================
   index.html - 订购页样式
   ======================================== */

/* === Page === */
.page { min-height: 100vh; background: #ffffff; }
.business-bottomcard { background: linear-gradient(180deg, #EAFAFF 0%, #DEF7BE 100%); padding-bottom: 8.53vw; }

/* === FirstSection === */
.first-section { position: relative; width: 100vw; height: 166.14vw; overflow: hidden; }
.first-section__bg { position: absolute; top: -1.59vw; left: 0; width: 100vw; height: 169.55vw; display: block; }
.first-section__title {
  position: absolute; top: 7.47vw; left: 50%; transform: translateX(-50%); width: 100%;
  color: #ffffff; font-family: ZhenyanGB, serif; font-size: 8.18vw; font-weight: 1000;
  line-height: 7.47vw; text-align: center; letter-spacing: 0.13vw;
  text-shadow: -0.27vw -0.27vw 0 #4e8113, 0.27vw -0.27vw 0 #4e8113, -0.27vw 0.27vw 0 #4e8113, 0.27vw 0.27vw 0 #4e8113, 0 0.27vw 1.07vw rgba(74,119,21,0.5);
}
.first-section__business-trigger {
  position: absolute; top: 11.73vw; right: 0; height: 20.53vw;
  border: 0.23vw solid #7bd316; border-top: 0; border-radius: 2.95vw 0 0 2.95vw;
  background: rgba(123,211,22,0.3);
  display: flex; justify-content: center; padding: 3.2vw; cursor: pointer;
  text-decoration: none;
}
.first-section__business-text { color: #ffffff; font-size: 3.2vw; font-weight: 500; line-height: 3.84vw; letter-spacing: 0.16vw; text-align: center; white-space: pre-line; }

/* Promo Card */
.promo-card { position: absolute; top: 17.6vw; left: 21.33vw; width: 57.73vw; height: 20.27vw; }
.promo-card__price-pill {
  position: absolute; top: 0; left: 20.67vw; width: 18.67vw; height: 5.87vw;
  border-radius: 4.55vw; background: #7bd316; display: flex; align-items: center; justify-content: center;
}
.promo-card__price-text { color: #ffffff; font-size: 3.18vw; font-weight: 600; }
.promo-card__slogan-bar {
  position: absolute; bottom: 0; left: 0; width: 57.73vw; height: 11.33vw;
  border-radius: 1.87vw 4.4vw 1.87vw 4.4vw; background: linear-gradient(180deg, #deffb7 0%, #7bd316 100%);
}
.promo-card__slogan-text {
  position: absolute; top: 12.13vw; left: 7.6vw; width: 42.67vw;
  color: #ffffff; font-family: ZhenyanGB, serif; font-size: 4.27vw; line-height: 5.07vw;
  text-align: center; text-shadow: 0 0.27vw 0.53vw rgba(0,0,0,0.25); font-weight: 800;
}

/* Rights Card */
.rights-card {
  position: absolute; top: 41.73vw; left: 3.33vw; width: 93.73vw; height: 60vw;
  border-radius: 6.27vw; background: #7bd316;
  box-shadow: inset 1.2vw 0.93vw 1.73vw rgba(255,255,255,0.45), inset -0.93vw -0.93vw 1.69vw rgba(255,255,255,0.45);
}
.rights-card__panel {
  position: absolute; top: 13.73vw; left: 3.47vw; width: 86.8vw; height: 42.8vw;
  border-radius: 4.13vw; background: #f3f7fa; box-shadow: 0.8vw 0.93vw 1.19vw rgba(0,0,0,0.05);
}
.rights-card__title {
  position: absolute; top: 5.2vw; left: 38.13vw; width: 18.07vw;
  color: #ffffff; font-family: ZhenyanGB, serif; font-size: 4.27vw; line-height: 5.07vw; text-align: center;
}
.rights-card__star { position: absolute; width: 6.8vw; height: 6.67vw; }
.rights-card__star--left { top: 3.6vw; left: 26.8vw; }
.rights-card__star--right { top: 4.13vw; left: 60.27vw; }
.rights-card__slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.rights-card__track {
  display: flex;
  height: 100%;
  transition: transform 0.4s ease;
}
.rights-card__slide {
  flex: 0 0 100%;
  width: 100%;
}
.rights-card__grid {
  display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 0;
  width: 100%; padding: 3.73vw 1.07vw 6.67vw; box-sizing: border-box;
}
.rights-card__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 6.4vw;
  height: 6.4vw;
  border-radius: 50%;
  background: rgba(0,0,0,0.18);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.rights-card__arrow:active {
  background: rgba(0,0,0,0.32);
}
.rights-card__arrow--left {
  left: 0.5vw;
}
.rights-card__arrow--left::after {
  content: '';
  display: block;
  width: 2vw;
  height: 2vw;
  border-left: 0.4vw solid #ffffff;
  border-bottom: 0.4vw solid #ffffff;
  transform: rotate(45deg);
  margin-left: 0.5vw;
}
.rights-card__arrow--right {
  right: 0.5vw;
}
.rights-card__arrow--right::after {
  content: '';
  display: block;
  width: 2vw;
  height: 2vw;
  border-right: 0.4vw solid #ffffff;
  border-top: 0.4vw solid #ffffff;
  transform: rotate(45deg);
  margin-right: 0.5vw;
}
.rights-card__item { display: flex; flex-direction: column; align-items: center; }
.rights-card__item-image { width: 11.73vw; height: 10.93vw; display: block; }
.rights-card__item-label { margin-top: 0.8vw; width: 17.07vw; color: #4b4a57; font-size: 2.13vw; line-height: 2.93vw; text-align: center; }
.rights-card__dots { position: absolute; left: 50%; bottom: 2.67vw; transform: translateX(-50%); display: flex; align-items: center; gap: 1.07vw; z-index: 4; }
.rights-card__dot { width: 1.87vw; height: 0.8vw; border-radius: 0.8vw; background: rgba(224,145,60,0.35); transition: all 0.25s ease; cursor: pointer; }
.rights-card__dot--active { width: 3.47vw; background: #e0913c; box-shadow: 0 0.4vw 1.33vw rgba(224,145,60,0.28); }

/* Phone Box */
.phone-box {
  position: absolute; top: 109.73vw; left: 3.87vw; width: 92.27vw; height: 13.64vw;
  border-radius: 3.64vw; background: #ffffff;
}
.phone-box__input { width: 100%; height: 100%; padding: 0 2.93vw; border: 1px solid #7bd316; outline: none; color: #000000; font-size: 4.09vw; border-radius: 3.64vw; }
.phone-box__input::placeholder { color: #C0C0C0; }

/* Submit Button */
.submit-btn {
  position: absolute; top: 130.46vw; left: 9.09vw; width: 72.82vw; height: 12.27vw;
  border-radius: 7.5vw; background: linear-gradient(180deg, #7bd316 0%, #7bd316 100%);
  box-shadow: inset 0 0.91vw 0.91vw rgba(255,255,255,0.6), inset 0 -0.68vw 0.18vw rgba(0,0,0,0.15);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.submit-btn--disabled { opacity: 0.55; }
.submit-btn__text { color: #ffffff; font-size: 4.55vw; font-weight: 600; }

/* Agree Group */
.agree-group { position: absolute; top: 146.4vw; left: 17.47vw; width: 64.85vw; height: 5.45vw; display: flex; align-items: center; }
.agree-group__checkbox {
  width: 4.8vw; height: 4.8vw; border-radius: 50%; border: 0.53vw solid #83d524;
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.agree-group__checkbox::after {
  content: '✓'; color: #ffffff; font-size: 2.67vw; line-height: 1; opacity: 0;
}
.agree-group__checkbox.checked {
  background: #83d524; border-color: #83d524;
}
.agree-group__checkbox.checked::after { opacity: 1; }
.agree-group__text { margin-left: 1.79vw; color: #000000; font-size: 3.18vw; line-height: 4.4vw; }

/* === LoginModal 登录弹窗 === */
.login-modal { display: none; position: fixed; inset: 0; z-index: 120; }
.login-modal.active { display: block; }
.login-modal__mask { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.login-modal__dialog {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 76vw; background: #ffffff; border-radius: 3.2vw; padding: 6.4vw 5.33vw 6.4vw;
  display: flex; flex-direction: column; align-items: stretch;
}
.login-modal__close {
  position: absolute; top: 1.6vw; right: 3.2vw; font-size: 6.4vw; color: #999999;
  line-height: 1; cursor: pointer; padding: 1.6vw;
}
.login-modal__title {
  text-align: center; font-size: 4.53vw; font-weight: 600; color: #000000; line-height: 5.87vw;
}
.login-modal__tip {
  margin-top: 2.4vw; text-align: center; font-size: 3.2vw; color: #666666; line-height: 4.8vw;
}
.login-modal__input-wrap {
  margin-top: 5.33vw; width: 100%; height: 11.2vw; border: 0.27vw solid #7bd316; border-radius: 2.13vw;
  display: flex; align-items: center; padding: 0 3.2vw;
}
.login-modal__input {
  flex: 1; height: 100%; border: 0; outline: 0; background: transparent;
  color: #333333; font-size: 3.73vw; letter-spacing: 0.27vw;
}
.login-modal__input::placeholder { color: #C0C0C0; }
.login-modal__actions {
  display: flex; justify-content: center;
}
.login-modal__btn {
  width: 100%; margin-top: 5.33vw; height: 11.2vw; border-radius: 5.6vw;
  background: linear-gradient(90deg, #7bd316 0%, #7bd316 100%);
  color: #ffffff; font-size: 4vw; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}

/* === BusinessSection === */
.business-card {
  position: relative; width: 92.27vw; height: 158.13vw; margin: 0 auto 4.8vw;
  border-radius: 3.89vw; background: linear-gradient(180deg, #7fd41d 0%, #f2ffe4 100%); overflow: hidden;
}
.business-panel {
  position: absolute; top: 14.13vw; left: 3.47vw; width: 85.47vw; height: 139.87vw;
  border-radius: 3.89vw; background: linear-gradient(0deg, #faf9f5 0%, #ffffff 100%);
}
.section-title {
  position: absolute; top: 3.64vw; left: 19.19vw; z-index: 2;
  width: 53.92vw; height: 7.47vw; display: flex; align-items: center; justify-content: center;
}
.section-title__line { width: 13.85vw; height: 0.27vw; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #ffffff 50%, rgba(255,255,255,0) 100%); }
.section-title__text { margin: 0 1.87vw; color: #ffffff; font-size: 5.34vw; font-weight: 600; letter-spacing: 0.27vw; line-height: 7.47vw; }
.business-scroll {
  position: absolute; top: 17.87vw; left: 6vw; z-index: 2; width: 80.8vw; height: 132.93vw; overflow-y: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.business-scroll::-webkit-scrollbar { display: none; }
.business-content { width: 80.8vw; padding-right: 0.8vw; }
.business-item { width: 80.8vw; margin-bottom: 2.67vw; color: #000000; font-size: 2.91vw; font-weight: 400; line-height: 5.6vw; letter-spacing: 0.15vw; }
.business-item--last { margin-bottom: 0; }
.text-accent { color: #ff5219; }
.text-tight { letter-spacing: -0.27vw; }

/* === ConfirmModal === */
/* === Toast === */
.toast-box { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 300;
  background: rgba(0, 0, 0, 0.7); border-radius: 2.13vw; padding: 4vw 6.4vw; max-width: 70vw; text-align: center;
  pointer-events: none; opacity: 0; transition: opacity 0.3s;
}
.toast-box.active { display: block; opacity: 1; }
.toast-box__msg { font-size: 3.73vw; color: #ffffff; line-height: 5.33vw; word-break: break-all; }
.confirm-modal { display: none; position: fixed; inset: 0; z-index: 200; }
.confirm-modal.active { display: block; }
.confirm-modal__mask { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.confirm-modal__dialog {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 72vw; background: #ffffff; border-radius: 3.2vw; overflow: hidden;
}
.confirm-modal__title {
  padding: 6.4vw 0 2.13vw; text-align: center;
  font-size: 4.27vw; font-weight: 600; color: #000000; line-height: 5.87vw;
}
.confirm-modal__msg {
  padding: 0 6.4vw 5.33vw; text-align: center;
  font-size: 3.47vw; font-weight: 400; color: #666666; line-height: 5.33vw;
}
.confirm-modal__link { color: #1890ff; }
.confirm-modal__actions {
  display: flex; align-items: center; border-top: 0.13vw solid #eeeeee;
}
.confirm-modal__btn {
  flex: 1; text-align: center; padding: 3.47vw 0; font-size: 4vw; cursor: pointer;
}
.confirm-modal__btn--cancel { color: #999999; }
.confirm-modal__btn--ok { color: #1890ff; font-weight: 500; }
.confirm-modal__divider { width: 0.13vw; height: 4.27vw; background: #eeeeee; }

/* === LogoutModal 退订弹窗 === */
.logout-modal { display: none; position: fixed; inset: 0; z-index: 110; }
.logout-modal.active { display: block; }
.logout-modal__mask { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.logout-modal__dialog {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 76vw; background: #ffffff; border-radius: 3.2vw; padding: 6.4vw 5.33vw 6.4vw;
  display: flex; flex-direction: column; align-items: stretch;
}
.logout-modal__close {
  position: absolute; top: 1.6vw; right: 3.2vw; font-size: 6.4vw; color: #999999;
  line-height: 1; cursor: pointer; padding: 1.6vw;
}
.logout-modal__title {
  text-align: center; font-size: 4.53vw; font-weight: 600; color: #000000; line-height: 5.87vw;
}
.logout-modal__tip {
  margin-top: 2.4vw; text-align: center; font-size: 3.2vw; color: #666666; line-height: 4.8vw;
}
.logout-modal__input-wrap {
  margin-top: 5.33vw; width: 100%; height: 11.2vw; border: 0.27vw solid #7bd316; border-radius: 2.13vw;
  display: flex; align-items: center; padding: 0 3.2vw;
}
.logout-modal__input {
  flex: 0; height: 100%; border: 0; outline: 0; background: transparent;
  color: #333333; letter-spacing: 0.27vw;
}
.logout-modal__change {
  flex-shrink: 0; color: #1890ff;
  text-decoration: underline; cursor: pointer; white-space: nowrap;
}
.logout-modal__actions {
  display: flex; justify-content: space-between;
}
.logout-modal__btn {
  width: calc((100% - 2.67vw) / 2); margin-top: 5.33vw; height: 11.2vw; border-radius: 5.6vw;
  color: #ffffff; font-size: 4vw; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.logout-modal__btn--query {
  background: linear-gradient(90deg, #16a4d3 0%, #3cf3d9 100%);
  margin-right: 2.67vw;
}
.logout-modal__btn--cancel {
  background: linear-gradient(90deg, #7bd316 0%, #7bd316 100%);
}

/* ========================================
   rights.html - 权益页样式
   ======================================== */

/* === Rights Page === */
.rights-page { position: relative; width: 100vw; min-height: 364.13vw; background: #ffffff; overflow-x: hidden; }
.rights-page__gradient {
  position: absolute; top: 166.14vw; left: 0; width: 100vw; height: 198vw;
  background: linear-gradient(180deg, #eafaff 0%, #def7be 100%);
}
.rights-page__vip { position: absolute; top: 123.07vw; left: 3.33vw; width: 93.33vw; }
.rights-page__playlist { position: relative; top: 0; left: 0; width: 100%; padding: 0 2.27vw; box-sizing: border-box; }

/* === RightsHeroSection === */
.rights-hero { position: relative; width: 100vw; height: 166.14vw; overflow: hidden; }
.rights-hero__bg { position: absolute; width: 100vw; height: 169.55vw; display: block; }
.rights-hero__bg--base { top: -0.92vw; left: 0; }
.rights-hero__bg--middle { top: -4vw; left: 0; }
.rights-hero__bg--top { top: -1.59vw; left: 0; }
.rights-hero__success { position: absolute; top: 15.33vw; left: 0; width: 100vw; }
.rights-hero__title {
  position: absolute; top: 0; left: 5.47vw; width: 89.07vw;
  color: #ffffff; font-family: ZhenyanGB, serif; font-size: 8.18vw; line-height: 10vw;
  text-align: center; white-space: pre-line;
  text-shadow: -0.27vw -0.27vw 0 #4e8113, 0.27vw -0.27vw 0 #4e8113, -0.27vw 0.27vw 0 #4e8113, 0.27vw 0.27vw 0 #4e8113, 0 0.27vw 1.07vw rgba(74,119,21,0.5);
}
.rights-hero__subtitle {
  position: absolute; top: 23.33vw; left: 34.53vw; width: 31.07vw;
  color: #ffffff; font-family: ZhenyanGB, serif; font-size: 7.47vw; line-height: 8vw;
  text-align: center;
  text-shadow: -0.27vw -0.27vw 0 #4e8113, 0.27vw -0.27vw 0 #4e8113, -0.27vw 0.27vw 0 #4e8113, 0.27vw 0.27vw 0 #4e8113, 0 0.27vw 1.07vw rgba(74,119,21,0.5);
}
.rights-hero__object { position: absolute; top: 29.87vw; left: 11.33vw; width: 77.33vw; height: 55.47vw; display: block; }

/* Rights Banner */
.rights-banner { position: absolute; top: 99.07vw; left: 3.33vw; width: 93.33vw; height: 21.07vw; cursor: pointer; }
.rights-banner__bg { position: absolute; inset: 0; width: 93.33vw; height: 21.07vw; border-radius: 4.93vw; display: block; }
.rights-banner__tag { position: absolute; top: 0.33vw; left: 0.68vw; width: 15.18vw; height: 6.1vw; display: block; }
.rights-banner__text {
  position: absolute; top: 6.2vw; left: 3.87vw; width: 41.07vw;
  color: transparent; font-size: 3.73vw; font-family: 'Yuanti TC', sans-serif; font-weight: 700;
  line-height: 5.6vw; white-space: pre-wrap;
  background: linear-gradient(90deg, #c354ff 0%, #4294ff 100%);
  -webkit-background-clip: text; background-clip: text;
  text-shadow: 0 0.4vw 0.52vw rgba(0,0,0,0.25);
}
.rights-banner__cta {
  position: absolute; top: 3.3vw; left: 76.53vw; width: 14.67vw; height: 14.67vw;
  border: 0.4vw solid #ffffff; border-radius: 50%;
  background: linear-gradient(218deg, #ff7259 9%, #f2ac61 46%, #ff571f 100%);
  box-shadow: inset 0 0.53vw 1.87vw rgba(255,255,255,0.25); cursor: pointer;
}
.rights-banner__cta-glow {
  position: absolute; top: 2.53vw; left: 2.53vw; width: 9.6vw; height: 9.6vw;
  border-radius: 50%; background: rgba(255,229,186,0.8); filter: blur(2.88vw);
}
.rights-banner__cta-overlay {
  position: absolute; top: 1.2vw; left: 1.47vw; width: 11.47vw; height: 11.47vw;
  border-radius: 50%; background: linear-gradient(140deg, rgba(255,255,255,0.4) 9%, rgba(255,255,255,0) 30%);
}
.rights-banner__cta-text {
  position: absolute; top: 3.33vw; left: 3.47vw;
  color: #b23613; font-size: 3.73vw; font-family: 'Yuanti TC', sans-serif; font-weight: 700;
  line-height: 4vw; text-align: center; white-space: pre-line;
  text-shadow: -0.13vw -0.13vw 0 #ffffff, 0.13vw -0.13vw 0 #ffffff, -0.13vw 0.13vw 0 #ffffff, 0.13vw 0.13vw 0 #ffffff;
}
.rights-banner__cta-text a { color: #b23613; text-decoration: none; }

/* === RightsVipCard === */
.vip-card { position: relative; width: 93.33vw; height: 66vw; }
.vip-card__top {
  position: absolute; top: 0; left: 0; width: 93.33vw; height: 47.6vw;
  border-radius: 3.89vw; background: linear-gradient(180deg, #7fd41d 0%, #f2ffe4 100%);
}
.vip-card__bottom {
  position: absolute; top: 14.93vw; left: 0; width: 93.33vw; height: 51.07vw;
  border-radius: 0 0 3.89vw 3.89vw; background: linear-gradient(223deg, #ffffff 0%, #d1fff8 100%);
}
.vip-card__watermark {
  position: absolute; top: -4.8vw; left: 74.67vw; width: 18.13vw;
  color: rgba(255,255,255,0.35); font-family: 'Paytone One', sans-serif;
  font-size: 10.67vw; line-height: 14.93vw; font-weight: 800;
}
.vip-card__title {
  position: absolute; top: 4.53vw; left: 26vw; width: 41.33vw;
  color: #ffffff; font-size: 5.33vw; font-weight: 600; letter-spacing: 0.13vw;
}
.vip-card__desc {
  position: absolute; top: 19.87vw; left: 6.53vw; width: 81.47vw;
  color: #000000; font-size: 3.2vw; line-height: 5.07vw; letter-spacing: 0.13vw;
}
.vip-card__button {
  position: absolute; top: 48.4vw; left: 16.53vw; width: 63.07vw; height: 12.4vw;
  border-radius: 7.5vw; background: linear-gradient(180deg, #16a4d3 0%, #3cf3d9 100%);
  box-shadow: inset 0 0.91vw 0.91vw rgba(255,255,255,0.6), inset 0 -0.68vw 0.18vw rgba(0,0,0,0.15);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.vip-card__button-text { color: #ffffff; font-size: 4.55vw; font-weight: 600; }

/* === RightsZoneModal === */
.zone-modal-mask {
  position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,0.5);
  display: none; animation: zone-mask-fade-in 0.24s ease;
}
.zone-modal-mask.active { display: block; }
.zone-modal {
  position: absolute; top: 50%; left: 50%; width: 86.93vw; height: 39.47vw;
  transform: translate(-50%, -50%); animation: zone-modal-pop-in 0.24s ease;
}
.zone-modal__panel { position: absolute; inset: 0; border-radius: 4.67vw; background: linear-gradient(180deg, #b0d1ff 0%, #f6f7ff 24%, #ffffff 100%); }
.zone-modal__close {
  position: absolute; top: 1.47vw; right: 1.47vw; z-index: 2;
  width: 6.4vw; height: 6.4vw; border-radius: 50%; background: rgba(0,0,0,0.12);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.zone-modal__close-text { color: rgba(0,0,0,0.5); font-size: 5.33vw; line-height: 1; }
.zone-modal__banner { position: absolute; top: 13.47vw; left: 2.8vw; width: 81.33vw; height: 20.4vw; }
.zone-modal__banner-bg { position: absolute; inset: 0; width: 81.33vw; height: 20.4vw; border-radius: 2.67vw; display: block; }
.zone-modal__banner-tag { position: absolute; top: 0.27vw; left: 0.8vw; width: 14.93vw; height: 6vw; display: block; }
.zone-modal__banner-text {
  position: absolute; top: 6vw; left: 3.87vw; width: 41.07vw;
  color: transparent; font-size: 3.73vw; font-family: 'Yuanti TC', sans-serif; font-weight: 700;
  line-height: 5.6vw; white-space: pre-wrap;
  background: linear-gradient(90deg, #c354ff 0%, #4294ff 100%);
  -webkit-background-clip: text; background-clip: text;
  text-shadow: 0 0.4vw 0.52vw rgba(0,0,0,0.25);
}
.zone-modal__banner-cta {
  position: absolute; top: 3.2vw; right: 3.47vw; width: 14.67vw; height: 14.67vw;
  border: 0.4vw solid #ffffff; border-radius: 50%;
  background: linear-gradient(218deg, #ff7259 9%, #f2ac61 46%, #ff571f 100%);
  box-shadow: inset 0 0.53vw 1.87vw rgba(255,255,255,0.25); cursor: pointer;
}
.zone-modal__banner-cta-glow {
  position: absolute; top: 2.53vw; left: 2.53vw; width: 9.6vw; height: 9.6vw;
  border-radius: 50%; background: rgba(255,229,186,0.8); filter: blur(2.88vw);
}
.zone-modal__banner-cta-overlay {
  position: absolute; top: 1.2vw; left: 1.47vw; width: 11.47vw; height: 11.47vw;
  border-radius: 50%; background: linear-gradient(140deg, rgba(255,255,255,0.4) 9%, rgba(255,255,255,0) 30%);
}
.zone-modal__banner-cta-text {
  position: absolute; top: 3.33vw; left: 3.47vw;
  color: #b23613; font-size: 3.73vw; font-family: 'Yuanti TC', sans-serif; font-weight: 700;
  line-height: 4vw; text-align: center; white-space: pre-line;
  text-shadow: -0.13vw -0.13vw 0 #ffffff, 0.13vw -0.13vw 0 #ffffff, -0.13vw 0.13vw 0 #ffffff, 0.13vw 0.13vw 0 #ffffff;
}

@keyframes zone-mask-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes zone-modal-pop-in {
  from { opacity: 0; transform: translate(-50%, -46%) scale(0.94); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ========================================
   共用样式 - PlaylistSection
   ======================================== */

/* === PlaylistSection === */
.playlist-card { position: relative; width: 95.47vw; margin: 0 auto; overflow: visible; }
.playlist-card__bg { position: absolute; inset: 0; width: 95.47vw; min-height: 154.6vw; height: auto; display: block; }
.playlist-card__panel {
  position: absolute; top: 13.03vw; left: 0; width: 95.47vw; z-index: 1;
  border-radius: 4.02vw 4.02vw 0 0; background: linear-gradient(0deg, #faf9f5 0%, #ffffff 100%);
  bottom: -10vw;
}
.playlist-card__glow {
  position: absolute; z-index: 2; width: 4.27vw; height: 3.86vw; border-radius: 50%;
  background: rgba(255,255,255,0.6); box-shadow: 0 0 3.61vw 1.6vw rgba(255,255,255,0.55);
}
.playlist-card__glow--left { top: 11.02vw; left: 7.57vw; }
.playlist-card__glow--right { top: 3.52vw; left: 84.64vw; }
.playlist-section-title {
  position: relative; margin: 3.29vw auto 0; z-index: 3;
  width: 60.02vw; height: 13vw; display: flex; align-items: center; justify-content: center;
}
.playlist-section-title__line { width: 14.31vw; height: 0.27vw; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #ffffff 50%, rgba(255,255,255,0) 100%); }
.playlist-section-title__text { margin: 0 2.93vw; color: #ffffff; font-size: 5.52vw; font-weight: 600; letter-spacing: 0.27vw; line-height: 7vw; }
.playlist-list { position: relative; margin: 2.33vw 0 6vw 5.73vw; z-index: 3; width: 85.07vw; }
.playlist-item { position: relative; width: 85.07vw; height: 11.87vw; margin-bottom: 6.93vw; }
.playlist-item:last-child { margin-bottom: 0; }
.playlist-item__meta { position: absolute; top: 60%; left: 0; width: 70vw; transform: translateY(-50%); }
.playlist-item__name { display: block; width: 100%; color: #000000; font-size: 4.27vw; font-weight: 500; line-height: 6vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playlist-item__artist { display: block; width: 100%; margin-top: 0.67vw; color: #737373; font-size: 3.73vw; font-weight: 500; line-height: 5.2vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playlist-item__play { position: absolute; top: 0.93vw; right: 0; width: 10.67vw; height: 10.67vw; }
.playlist-item__play-bg {
  position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(180deg, #e0ffba 0%, #48cf2a 100%); box-shadow: 0 0.67vw 0.67vw rgba(0,0,0,0.1);
}
.playlist-item__play-icon { position: absolute; top: 2.93vw; left: 2.93vw; width: 4.8vw; height: 4.8vw; display: block; }

/* ========================================
   共用样式 - FloatIcons
   ======================================== */

/* === FloatIcons === */
.float-icons { position: absolute; right: 2.67vw; top: 126vw; z-index: 50; display: flex; flex-direction: column; align-items: center; gap: 2.67vw; }
.float-icons__item {
  width: 11.73vw; height: 11.73vw; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 0.53vw 1.6vw rgba(0,0,0,0.15);
  transition: transform 0.2s;
}
.float-icons__item:active { transform: scale(0.92); }
.float-icons__item--logout { background: #ffffff; }
.float-icons__item--logout img, .float-icons__item--logout svg { display: block; }
.float-icons__item--download { background: none; box-shadow: none; border-radius: 50%; }
.float-icons__item--download img { border-radius: 50%; display: block; }

/* === BannerPopup === */
.banner-popup-mask {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.5);
  animation: zone-mask-fade-in 0.24s ease;
}
.banner-popup {
  position: absolute; width: 93.33vw; height: 21.07vw;
  animation: zone-modal-pop-in 0.24s ease;
}
.banner-popup__content .rights-banner {
  position: relative; width: 93.33vw; height: 21.07vw; cursor: pointer;
}
.banner-popup__content .rights-banner__bg {
  position: absolute; inset: 0; width: 93.33vw; height: 21.07vw; border-radius: 4.93vw; display: block;
}
.banner-popup__content .rights-banner__tag { position: absolute; top: 0.33vw; left: 0.68vw; width: 15.18vw; height: 6.1vw; display: block; }
.banner-popup__content .rights-banner__text {
  position: absolute; top: 6.2vw; left: 3.87vw; width: 41.07vw;
  color: transparent; font-size: 3.73vw; font-family: 'Yuanti TC', sans-serif; font-weight: 700;
  line-height: 5.6vw; white-space: pre-wrap;
  background: linear-gradient(90deg, #c354ff 0%, #4294ff 100%);
  -webkit-background-clip: text; background-clip: text;
  text-shadow: 0 0.4vw 0.52vw rgba(0,0,0,0.25);
}
.banner-popup__content .rights-banner__cta {
  position: absolute; top: 3.3vw; left: 76.53vw; width: 14.67vw; height: 14.67vw;
  border: 0.4vw solid #ffffff; border-radius: 50%;
  background: linear-gradient(218deg, #ff7259 9%, #f2ac61 46%, #ff571f 100%);
  box-shadow: inset 0 0.53vw 1.87vw rgba(255,255,255,0.25); cursor: pointer;
}
.banner-popup__content .rights-banner__cta-glow {
  position: absolute; top: 2.53vw; left: 2.53vw; width: 9.6vw; height: 9.6vw;
  border-radius: 50%; background: rgba(255,229,186,0.8); filter: blur(2.88vw);
}
.banner-popup__content .rights-banner__cta-overlay {
  position: absolute; top: 1.2vw; left: 1.47vw; width: 11.47vw; height: 11.47vw;
  border-radius: 50%; background: linear-gradient(140deg, rgba(255,255,255,0.4) 9%, rgba(255,255,255,0) 30%);
}
.banner-popup__content .rights-banner__cta-text {
  position: absolute; top: 3.33vw; left: 3.47vw;
  color: #b23613; font-size: 3.73vw; font-family: 'Yuanti TC', sans-serif; font-weight: 700;
  line-height: 4vw; text-align: center; white-space: pre-line;
  text-shadow: -0.13vw -0.13vw 0 #ffffff, 0.13vw -0.13vw 0 #ffffff, -0.13vw 0.13vw 0 #ffffff, 0.13vw 0.13vw 0 #ffffff;
}