:root{
  --uuriza-vip-bg: radial-gradient(92.81% 48.44% at -24.53% -16.02%,#e4fcff 0%,rgba(255,255,255,0) 100%),radial-gradient(75.78% 68.16% at 56.74% -24.02%,#fcffda 0%,rgba(255,255,255,0) 100%),radial-gradient(160.86% 46.39% at 177.14% -15.62%,#ffc8c8 9.06%,rgba(255,255,255,0) 100%),#f0f7f9;
  --uuriza-vip-ink: #1f1f1f;
  --uuriza-vip-muted: rgba(0,0,0,.55);
  --uuriza-vip-line: rgba(0,0,0,.08);
  --uuriza-vip-card: #ffffff;
  --uuriza-vip-left-bg: #ffffff;
  --uuriza-vip-shadow: 0 22px 60px rgba(0,0,0,.18);
  --uuriza-vip-radius: 18px;
}

html.io-black-mode{
  --uuriza-vip-bg: radial-gradient(120% 120% at 0% 0%, rgba(4,209,103,.18) 0%, rgba(0,0,0,0) 55%), radial-gradient(120% 120% at 100% 0%, rgba(20,123,251,.20) 0%, rgba(0,0,0,0) 55%), radial-gradient(140% 140% at 100% 100%, rgba(242,60,19,.16) 0%, rgba(0,0,0,0) 55%), #2D2E2F;
  --uuriza-vip-ink: rgba(255,255,255,.90);
  --uuriza-vip-muted: rgba(255,255,255,.55);
  --uuriza-vip-line: rgba(255,255,255,.10);
  --uuriza-vip-card: rgba(255,255,255,.06);
  --uuriza-vip-left-bg: #2D2E2F;
  --uuriza-vip-shadow: 0 22px 60px rgba(0,0,0,.45);
}

.uuriza-vip-modal-root{ position: relative; z-index: 99999; }
.uuriza-vip-modal{ position: fixed; inset: 0; display: none; }
.uuriza-vip-modal.is-open{ display: block; }
.uuriza-vip-modal__backdrop{ position: absolute; inset: 0; background: rgba(0,0,0,.45); }
html.io-black-mode .uuriza-vip-modal__backdrop{ background: rgba(0,0,0,.65); }

.uuriza-vip-modal__dialog{
  position: relative;
  margin: 0;
  width: min(700px, calc(100vw - 28px));
  min-height: 350px;
  border-radius: var(--uuriza-vip-radius);
  overflow: hidden;
  box-shadow: var(--uuriza-vip-shadow);
  background: var(--uuriza-vip-card);
  color: var(--uuriza-vip-ink);
}
 .uuriza-vip-modal__dialog{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.uuriza-vip-modal__grid{
  display: grid;
  grid-template-columns: 1.2fr .9fr;
  min-height: 350px;
}

.uuriza-vip-modal__left{
  padding: 18px 18px 14px;
  background: var(--uuriza-vip-left-bg);
}
.uuriza-vip-modal__right{
  padding: 18px;
  background: var(--uuriza-vip-bg);
}

.uuriza-vip-modal__close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--uuriza-vip-line);
  background: rgba(255,255,255,.75);
  color: var(--uuriza-vip-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
html.io-black-mode .uuriza-vip-modal__close{ background: rgba(0,0,0,.25); }

.uuriza-vip-user{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.uuriza-vip-user__avatar{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(0,0,0,.06);
}
.uuriza-vip-user__name{ font-size: 18px; font-weight: 600; line-height: 1.2; }
.uuriza-vip-user__sub{ margin-top: 4px; color: var(--uuriza-vip-muted); font-size: 13px; }

.uuriza-vip-plans{ margin-top: 12px; }
.uuriza-vip-plans__title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin: 10px 2px 12px;
  font-size: 13px;
  color: var(--uuriza-vip-muted);
}
.uuriza-vip-plan-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.uuriza-vip-plan{
  border: 1px solid var(--uuriza-vip-line);
  border-radius: 16px;
  padding: 14px 12px;
  background: rgba(0,0,0,.02);
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
  min-height: 104px;
  text-align:center;
}
html.io-black-mode .uuriza-vip-plan{ background: rgba(255,255,255,.04); }
.uuriza-vip-plan:hover{ transform: translateY(-2px); }
.uuriza-vip-plan.is-active{
  border-color: rgba(240,77,32,.55);
  background: rgba(240,77,32,.08);
}
.uuriza-vip-plan__name{ font-size: 14px; font-weight: 400; line-height: 1.25; }
.uuriza-vip-plan__price{ margin-top: 10px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.uuriza-vip-plan__price small{ font-size: 14px; font-weight: 600; opacity: .9; margin-right: 2px; }

.uuriza-vip-benefits{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--uuriza-vip-line);
}
.uuriza-vip-benefits__title{
  font-size: 13px;
  color: var(--uuriza-vip-muted);
  margin: 0 2px 10px;
}
.uuriza-vip-benefits__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
}
.uuriza-vip-benefit{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 2px 0;
  font-size: 13px;
  line-height: 1.25;
}
.uuriza-vip-benefit .iconfont{
  font-size: 16px;
  line-height: 1.1;
  color: #04d167;
  flex: 0 0 auto;
  margin-top: 0px;
}
.uuriza-vip-benefit span{
  color: var(--uuriza-vip-ink);
}
.uuriza-vip-benefit span{
  word-break: break-word;
}
.uuriza-vip-benefits__empty{
  grid-column: 1 / -1;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px dashed var(--uuriza-vip-line);
  color: var(--uuriza-vip-muted);
  font-size: 13px;
  text-align: center;
}
.uuriza-vip-benefits__agreement{
  margin-top: 10px;
  font-size: 12px;
  color: var(--uuriza-vip-muted);
}
.uuriza-vip-benefits__more{
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--uuriza-vip-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.uuriza-vip-benefits__more:hover{ color: var(--uuriza-vip-ink); }
.uuriza-vip-benefits__more::after{
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  opacity: .6;
}
.uuriza-vip-benefits__agreement a{
  color: var(--uuriza-vip-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--uuriza-vip-line);
}
.uuriza-vip-benefits__agreement a:hover{
  opacity: .85;
}

.uuriza-vip-pay{
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
}
.uuriza-vip-pay__amount{
  font-size: 46px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.03em;
}
.uuriza-vip-pay__amount small{ font-size: 20px; font-weight: 700; margin-right: 2px; }
.uuriza-vip-pay__qr{
  width: 140px;
  height: 140px;
  border-radius: 18px;
  border: 1px solid var(--uuriza-vip-line);
  background: rgba(255,255,255,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
html.io-black-mode .uuriza-vip-pay__qr{ background: rgba(0,0,0,.15); }
.uuriza-vip-pay__qr img{ width: 100%; height: 100%; object-fit: cover; }
.uuriza-vip-pay__qr-placeholder{
  color: var(--uuriza-vip-muted);
  font-size: 13px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.uuriza-vip-pay__qr-placeholder::before{
  content: "";
  width: 120px;
  height: 120px;
  border-radius: 14px;
  border: 1px dashed var(--uuriza-vip-line);
  background:
    linear-gradient(90deg, rgba(0,0,0,.06) 1px, transparent 1px) 0 0/14px 14px,
    linear-gradient(rgba(0,0,0,.06) 1px, transparent 1px) 0 0/14px 14px,
    rgba(255,255,255,.55);
}
html.io-black-mode .uuriza-vip-pay__qr-placeholder::before{
  background:
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px) 0 0/14px 14px,
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px) 0 0/14px 14px,
    rgba(0,0,0,.12);
}
.uuriza-vip-pay__qr-expired{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
}
.uuriza-vip-pay__qr.is-expired .uuriza-vip-pay__qr-expired{ display: flex; }
.uuriza-vip-pay__qr-expired .iconfont{ font-size: 22px; }

.uuriza-vip-pay__method{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.uuriza-vip-pay__pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--uuriza-vip-line);
  background: rgba(255,255,255,.70);
  cursor: pointer;
  user-select: none;
  transition: transform .12s ease, opacity .12s ease;
  font-weight: 600;
  font-size: 13px;
}
html.io-black-mode .uuriza-vip-pay__pill{ background: rgba(0,0,0,.18); }
.uuriza-vip-pay__pill.is-dim{ opacity: .45; }
.uuriza-vip-pay__pill:hover{ transform: translateY(-1px); }
.uuriza-vip-pay__pill .iconfont{ font-size: 16px; }
.uuriza-vip-pay__pill.is-alipay .iconfont{ color: #147bfb; }
.uuriza-vip-pay__pill.is-wechat .iconfont{ color: #04d167; }

.uuriza-vip-pay__actions{
  display: flex;
  gap: 12px;
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}
.uuriza-vip-btn{
  min-width: 120px;
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid var(--uuriza-vip-line);
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
}
.uuriza-vip-btn--primary{
  background: #111;
  color: #fff;
  border-color: rgba(0,0,0,.25);
}
html.io-black-mode .uuriza-vip-btn--primary{ background: #fff; color: #111; }
.uuriza-vip-btn--ghost{
  background: rgba(255,255,255,.60);
  color: var(--uuriza-vip-ink);
}
html.io-black-mode .uuriza-vip-btn--ghost{ background: rgba(0,0,0,.18); }

.uuriza-vip-pay__hint{
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--uuriza-vip-line);
  background: rgba(255,255,255,.70);
  color: var(--uuriza-vip-ink);
  font-size: 12px;
  font-weight: 600;
}
html.io-black-mode .uuriza-vip-pay__hint{ background: rgba(0,0,0,.18); }
.uuriza-vip-pay__hint .iconfont{ font-size: 14px; }
.uuriza-vip-pay__hint .iconfont.icon-alipay{ color: #147bfb; }
.uuriza-vip-pay__hint .iconfont.icon-wechat_pay_line{ color: #04d167; }

@media (max-width: 740px){
  .uuriza-vip-modal__grid{ grid-template-columns: 1fr; }
  .uuriza-vip-plan-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uuriza-vip-benefits__grid{ grid-template-columns: 1fr; }
}