.app-message-wrap[data-v-a984b746] {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}
.app-message-item[data-v-a984b746] {
  min-width: 17.5rem;
  max-width: 32.5rem;
  min-height: 3rem;
  padding: 0 0.875rem;
  border-radius: var(--radius-card-sm);
  border: var(--color-border);
  background: var(--color-message-item-bg);
  box-shadow: var(--shadow-message);
  display: flex;
  align-items: center;
  gap: 0.625rem;
  pointer-events: auto;
}
.app-message-success[data-v-a984b746] {
  border-color: var(--color-message-success);
}
.app-message-error[data-v-a984b746] {
  border-color: var(--color-message-error);
}
.app-message-info[data-v-a984b746] {
  border-color: var(--color-message-info);
}
.app-message-warning[data-v-a984b746] {
  border-color: var(--color-message-warning);
}
.app-message-dot[data-v-a984b746] {
  width: 0.5625rem;
  height: 0.5625rem;
  border-radius: 50%;
  background: var(--color-message-success);
  flex-shrink: 0;
}
.app-message-error .app-message-dot[data-v-a984b746] {
  background: var(--color-message-error);
}
.app-message-info .app-message-dot[data-v-a984b746] {
  background: var(--color-message-info);
}
.app-message-warning .app-message-dot[data-v-a984b746] {
  background: var(--color-message-warning);
}
.app-message-text[data-v-a984b746] {
  color: var(--color-text-primary);
  font-size: var(--font-size-primary-desc);
  font-weight: 600;
  line-height: 1.4;
  flex: 1;
  word-break: break-all;
}
.app-message-close[data-v-a984b746] {
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 0.875rem;
  padding: 0;
  line-height: 1;
  opacity: 0.78;
}
.app-message-close[data-v-a984b746]:hover {
  opacity: 1;
  color: var(--color-text-primary);
}
.app-message-enter-active[data-v-a984b746],
.app-message-leave-active[data-v-a984b746] {
  transition: all 0.2s ease;
}
.app-message-enter-from[data-v-a984b746],
.app-message-leave-to[data-v-a984b746] {
  opacity: 0;
  transform: translateY(-0.5rem);
}
.app-modal-root[data-v-ffb9d0c9] {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-modal-mask[data-v-ffb9d0c9] {
  position: absolute;
  inset: 0;
  background: var(--color-modal-backdrop);
  backdrop-filter: blur(0.125rem);
}
.app-modal-panel[data-v-ffb9d0c9] {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-level-2);
  border: var(--color-border);
  background: var(--color-card-elevated);
  box-shadow: var(--shadow-panel);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
}
.app-modal-panel-recharge[data-v-ffb9d0c9] {
  padding: 0;
  border: none;
  background: var(--color-recharge-shell-bg);
  border-radius: 1.125rem;
  box-shadow: none;
}
.app-modal-close[data-v-ffb9d0c9] {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 1.125rem;
  cursor: pointer;
  line-height: 1;
}
.app-modal-header[data-v-ffb9d0c9] {
  text-align: center;
  padding-top: 0.5rem;
}
.app-modal-title[data-v-ffb9d0c9] {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-submit-title);
  font-weight: 700;
}
.app-modal-body[data-v-ffb9d0c9] {
  flex: 1;
  min-height: 0;
}
.app-modal-footer[data-v-ffb9d0c9] {
  margin-top: 0.75rem;
}
.app-modal-enter-active[data-v-ffb9d0c9],
.app-modal-leave-active[data-v-ffb9d0c9] {
  transition: opacity 0.2s ease;
}
.app-modal-enter-from[data-v-ffb9d0c9],
.app-modal-leave-to[data-v-ffb9d0c9] {
  opacity: 0;
}
.app-modal-enter-active .app-modal-mask[data-v-ffb9d0c9],
.app-modal-leave-active .app-modal-mask[data-v-ffb9d0c9] {
  transition: opacity 0.2s ease;
}
.app-modal-enter-from .app-modal-mask[data-v-ffb9d0c9],
.app-modal-leave-to .app-modal-mask[data-v-ffb9d0c9] {
  opacity: 0;
}
.app-modal-enter-active .app-modal-panel[data-v-ffb9d0c9],
.app-modal-leave-active .app-modal-panel[data-v-ffb9d0c9] {
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.app-modal-enter-from .app-modal-panel[data-v-ffb9d0c9],
.app-modal-leave-to .app-modal-panel[data-v-ffb9d0c9] {
  transform: translateY(0.5rem) scale(0.98);
  opacity: 0;
}
.coupon-success-root[data-v-b14c3b82] {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
}
.coupon-success-panel[data-v-b14c3b82] {
  width: 42.5rem;
  padding: 3rem 3rem 2rem;
  border-radius: 1.125rem;
  background: var(--color-task-panel-bg);
  border: 0.0625rem solid var(--color-modal-result-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.125rem;
  box-shadow: 0 0.625rem 1.625rem rgba(0, 0, 0, 0.33);
  backdrop-filter: blur(1.5rem);
}
.success-icon-wrapper[data-v-b14c3b82] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.success-ring1[data-v-b14c3b82] {
  width: 7.25rem;
  height: 7.25rem;
  border-radius: 50%;
  background: var(--color-modal-coupon-success-ring1);
  border: 0.0625rem solid var(--color-modal-coupon-success-ring1-border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.success-ring2[data-v-b14c3b82] {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  background: var(--color-modal-coupon-success-ring2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.success-icon[data-v-b14c3b82] {
  width: 4.375rem;
  height: 4.375rem;
  border-radius: 50%;
  background: var(--color-modal-coupon-success-icon-bg);
  border: 0.125rem solid var(--color-modal-coupon-success-icon-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.875rem;
  color: var(--color-modal-coupon-success-icon-fill);
}
.success-title[data-v-b14c3b82] {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-modal-coupon-success-title);
  text-align: center;
}
.success-desc[data-v-b14c3b82] {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-modal-coupon-success-desc);
  text-align: center;
  max-width: 26.25rem;
}
.success-tip[data-v-b14c3b82] {
  width: 26.25rem;
  padding: 1.25rem;
  border-radius: 0.625rem;
  background: var(--color-modal-coupon-success-tip-bg);
  border: 0.0625rem solid var(--color-modal-coupon-success-tip-border);
  color: var(--color-modal-coupon-success-tip-text);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.5;
}
.success-actions[data-v-b14c3b82] {
  width: 26.875rem;
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}
.success-btn[data-v-b14c3b82] {
  flex: 1;
  height: 2.75rem;
  border-radius: 0.625rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
  border: none;
}
.success-btn.primary[data-v-b14c3b82] {
  background: var(--color-modal-coupon-success-btn-primary-bg);
  border: 0.0625rem solid var(--color-modal-coupon-success-btn-primary-border);
  color: var(--color-modal-coupon-success-btn-primary-text);
}
.success-btn.secondary[data-v-b14c3b82] {
  background: var(--color-modal-coupon-success-btn-secondary-bg);
  border: 0.0625rem solid var(--color-modal-coupon-success-btn-secondary-border);
  color: var(--color-modal-coupon-success-btn-secondary-text);
}
.success-btn[data-v-b14c3b82]:hover {
  opacity: 0.85;
}
.success-footer[data-v-b14c3b82] {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-modal-coupon-success-footer-text);
  letter-spacing: 0.05rem;
}
[data-v-ac2135f6] .cu-panel {
  border-radius: 1rem;
  padding: 2rem 3rem;
  background: var(--surface-color);
  box-shadow: 0 0.625rem 1.625rem rgba(0, 0, 0, 0.06);
}
[data-theme='dark'][data-v-ac2135f6] .cu-panel {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(1.5rem);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0.625rem 1.625rem rgba(0, 0, 0, 0.33);
}
.cu-content[data-v-ac2135f6] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.375rem;
  position: relative;
}
.cu-close-btn[data-v-ac2135f6] {
  position: absolute;
  top: -0.625rem;
  right: -0.625rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 0.0625rem solid var(--color-border);
  background: var(--surface-tertiary-color);
  color: var(--color-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: background 0.15s;
  z-index: 1;
}
.cu-close-btn[data-v-ac2135f6]:hover {
  background: var(--color-hover);
}
[data-theme='dark'] .cu-close-btn[data-v-ac2135f6] {
  background: rgba(255, 255, 255, 0.063);
  border-color: rgba(255, 255, 255, 0.12);
  color: #dbe2fb;
}
.cu-title-wrap[data-v-ac2135f6] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.cu-title[data-v-ac2135f6] {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text-primary);
  text-align: center;
}
.cu-subtitle[data-v-ac2135f6] {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-accent-primary);
  letter-spacing: 0.3125rem;
  text-align: center;
  text-transform: uppercase;
}
.cu-qr-wrap[data-v-ac2135f6] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cu-qr-inner[data-v-ac2135f6] {
  width: 13.125rem;
  height: 13.125rem;
  border-radius: 0.875rem;
  border: 0.0625rem solid var(--color-border);
  background: var(--surface-secondary-color);
  padding: 1.25rem;
}
[data-theme='dark'] .cu-qr-inner[data-v-ac2135f6] {
  background: rgba(11, 16, 32, 0.93);
  border-color: rgba(255, 255, 255, 0.14);
}
.cu-qr-img[data-v-ac2135f6] {
  width: 100%;
  height: 100%;
}
.cu-hint[data-v-ac2135f6] {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  text-align: center;
}
[data-theme='dark'] .cu-hint[data-v-ac2135f6] {
  color: #dbe2fb;
}
.cu-time[data-v-ac2135f6] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  height: 2.375rem;
  border-radius: 0.625rem;
  border: 0.0625rem solid var(--color-border);
  background: var(--surface-secondary-color);
}
[data-theme='dark'] .cu-time[data-v-ac2135f6] {
  background: rgba(11, 16, 32, 0.93);
  border-color: rgba(255, 255, 255, 0.14);
}
.cu-time-icon[data-v-ac2135f6] {
  font-size: 1rem;
  color: var(--color-accent-primary);
}
.cu-time-text[data-v-ac2135f6] {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text-secondary);
}
[data-theme='dark'] .cu-time-text[data-v-ac2135f6] {
  color: #8fa0c8;
}
.recharge-shell[data-v-6460bf5f] {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  overflow: hidden;
}
.left-panel[data-v-6460bf5f] {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.tab-shell[data-v-6460bf5f] {
  flex-shrink: 0;
  width: 19rem;
  height: 3.125rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem;
  border-radius: 1rem;
  background: var(--color-recharge-tab-bg);
  border: 0.0625rem solid var(--color-recharge-tab-border);
}
.shell-tab[data-v-6460bf5f] {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.375rem;
  padding: 0 1rem;
  border-radius: 0.625rem;
  cursor: pointer;
  transition: background 0.2s;
}
.shell-tab-active[data-v-6460bf5f] {
  background: var(--color-recharge-tab-active-bg);
}
.tab-text[data-v-6460bf5f] {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--color-recharge-tab-inactive);
  white-space: nowrap;
  transition: color 0.2s;
}
.tab-text-active[data-v-6460bf5f] {
  color: var(--color-recharge-tab-active-text);
  font-weight: 700;
}
.recharge-bottom[data-v-6460bf5f] {
  display: flex;
  justify-content: center;
  padding-bottom: 0.25rem;
  flex-shrink: 0;
}
.close-btn[data-v-6460bf5f] {
  appearance: none;
  width: 8.75rem;
  height: 2.5rem;
  border-radius: 0.625rem;
  background: #4298c7;
  border: 0.0625rem solid #4298c7;
  color: #ffffff;
  font-family: Inter, sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s ease;
}
.close-btn[data-v-6460bf5f]:hover {
  opacity: 0.85;
}
html[data-theme='dark'] .close-btn[data-v-6460bf5f] {
  background: #00a9cc;
  border-color: #00e5ff;
  color: #eaf2ff;
}
.shell-body[data-v-6460bf5f] {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 1rem;
}
.product-zone[data-v-6460bf5f] {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  overflow: auto;
  padding-right: 0.25rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.product-zone[data-v-6460bf5f]::-webkit-scrollbar {
  display: none;
}
.page-title[data-v-6460bf5f] {
  margin: 0;
  font-size: 1.375rem;
  color: var(--color-text-primary);
  font-weight: 700;
  line-height: 1.25;
  flex-shrink: 0;
}
.package-section[data-v-6460bf5f] {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.section-title[data-v-6460bf5f] {
  margin: 0;
  color: var(--color-recharge-section-title);
  font-size: 1rem;
  font-weight: 700;
}
.card-row[data-v-6460bf5f] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}
.card-row-skeleton[data-v-6460bf5f] {
  flex-wrap: nowrap;
}
.card[data-v-6460bf5f] {
  flex: none;
  width: 13rem;
  height: 18rem;
  border: var(--color-recharge-card-border);
  border-radius: 0.75rem;
  background: var(--color-recharge-card-bg);
  padding: 1.125rem 0.875rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.card[data-v-6460bf5f]:hover {
  border-color: var(--color-recharge-active-border);
}
.card-active[data-v-6460bf5f] {
  border-color: var(--color-recharge-active-border);
  background: var(--color-recharge-active-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--color-recharge-active-border), 0 0.25rem 0.625rem var(--color-recharge-active-shadow);
}
.card-skeleton[data-v-6460bf5f] {
  pointer-events: none;
}
.card-title[data-v-6460bf5f] {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
.card-price-block[data-v-6460bf5f] {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.card-price[data-v-6460bf5f] {
  color: var(--color-recharge-price);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  word-break: break-all;
}
.card-origin[data-v-6460bf5f] {
  color: var(--color-recharge-origin);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: line-through;
}
.card-power-box[data-v-6460bf5f] {
  border: 0.0625rem solid var(--color-recharge-power-box-border);
  border-radius: 0.5rem;
  background: var(--color-recharge-power-box-bg);
  padding: 0.375rem 0.625rem;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.card-power-box-placeholder[data-v-6460bf5f] {
  opacity: 0;
}
.card-power-box-hidden[data-v-6460bf5f] {
  visibility: hidden;
}
.card-power-text[data-v-6460bf5f] {
  color: var(--color-recharge-desc);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.45;
}
.card-badge-row[data-v-6460bf5f] {
  flex-shrink: 0;
  margin-top: auto;
  border-radius: 0.625rem;
  background: var(--color-recharge-badge-bg);
  padding: 0.5rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-badge-row-hidden[data-v-6460bf5f] {
  visibility: hidden;
}
.card-badge[data-v-6460bf5f] {
  color: var(--color-recharge-badge-text);
  font-size: 0.6875rem;
  font-weight: 700;
}
.card-badge-time[data-v-6460bf5f] {
  color: var(--color-recharge-badge-time);
  font-size: 0.6875rem;
  font-weight: 700;
}
.card-bottom-row[data-v-6460bf5f] {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-limit[data-v-6460bf5f] {
  color: var(--color-recharge-limit-text);
  font-size: 0.6875rem;
  font-weight: 700;
}
.card-limit-hidden[data-v-6460bf5f] {
  visibility: hidden;
}
.card-low-tag[data-v-6460bf5f] {
  padding: 0.1875rem 0.5rem;
  border-radius: 62.4375rem;
  border: 0.0625rem solid var(--color-recharge-low-tag-border);
  background: var(--color-recharge-low-tag-bg);
  color: var(--color-recharge-low-tag-text);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.2;
}
.card-product-label[data-v-6460bf5f] {
  position: absolute;
  top: 0;
  right: 0;
  width: 5rem;
  height: 1.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom-left-radius: 0.625rem;
  background: var(--color-recharge-product-label-bg);
  border: 0.0625rem solid var(--color-recharge-product-label-border);
  color: var(--color-recharge-product-label-text);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  z-index: 1;
}
.card-unit-price[data-v-6460bf5f] {
  padding: 0.1875rem 0.5rem;
  border-radius: 62.4375rem;
  border: 0.0625rem solid var(--color-recharge-low-tag-border);
  background: var(--color-recharge-low-tag-bg);
  color: var(--color-recharge-low-tag-text);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.2;
}
.card-unit-price-hidden[data-v-6460bf5f] {
  visibility: hidden;
}
.pay-zone[data-v-6460bf5f] {
  width: 23.125rem;
  flex-shrink: 0;
  border: var(--color-border);
  border-radius: 1rem;
  background: var(--color-recharge-pay-bg);
  padding: 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow-y: auto;
}
.pay-title[data-v-6460bf5f] {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 1.5rem;
  font-weight: 700;
  flex-shrink: 0;
}
.pay-divider[data-v-6460bf5f] {
  width: 100%;
  height: 0.0625rem;
  background: var(--color-recharge-divider);
  flex-shrink: 0;
}
.pay-method-switch[data-v-6460bf5f] {
  flex-shrink: 0;
  display: flex;
  gap: 0.375rem;
  padding: 0.25rem;
  border-radius: 0.5rem;
  background: var(--color-recharge-switch-bg);
  border: 0.0625rem solid var(--color-recharge-switch-border);
}
.pay-method-btn[data-v-6460bf5f] {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5625rem 0.5rem;
  border: 0.0625rem solid transparent;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--color-recharge-switch-inactive-text);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.pay-method-btn-active[data-v-6460bf5f] {
  background: var(--color-recharge-switch-active-bg);
  border-color: var(--color-recharge-switch-active-border);
  color: var(--color-recharge-switch-active-text);
}
.pay-method-icon[data-v-6460bf5f] {
  width: 0.75rem;
  height: 0.75rem;
}
.qr-area[data-v-6460bf5f] {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
}
.qr-wrap[data-v-6460bf5f] {
  width: 14.75rem;
  height: 14.75rem;
  border-radius: 0.75rem;
  background: var(--color-recharge-qrcode-shell);
  padding: 0.875rem;
}
.qr-image[data-v-6460bf5f] {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 0.5rem;
  object-fit: contain;
  background: #fff;
}
.qr-placeholder[data-v-6460bf5f] {
  width: 100%;
  height: 100%;
  border-radius: 0.5rem;
  border: 0.0625rem solid var(--color-recharge-qrcode-border);
  background-color: var(--color-recharge-qrcode-a);
  background-image: linear-gradient(45deg, var(--color-recharge-qrcode-b) 25%, transparent 25%), linear-gradient(-45deg, var(--color-recharge-qrcode-b) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--color-recharge-qrcode-b) 75%), linear-gradient(-45deg, transparent 75%, var(--color-recharge-qrcode-b) 75%);
  background-size: 0.875rem 0.875rem;
  background-position: 0 0, 0 0.4375rem, 0.4375rem -0.4375rem, -0.4375rem 0;
}
.qr-price-text[data-v-6460bf5f] {
  margin: 0;
  text-align: center;
  color: var(--color-text-primary);
  font-size: 1.0625rem;
  font-weight: 700;
}
.pay-safe[data-v-6460bf5f] {
  margin: 0;
  text-align: center;
  color: var(--color-recharge-safe-text);
  font-size: 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0;
  flex-shrink: 0;
}
.pay-note[data-v-6460bf5f] {
  flex-shrink: 0;
  margin-top: 0.5rem;
  border-radius: 0.5rem;
  background: var(--color-recharge-note-bg);
  color: var(--color-text-supporting);
  font-size: var(--font-size-secondary);
  font-weight: 600;
  line-height: 1.8;
  padding: 0.75rem;
}
.help-btn[data-v-6460bf5f] {
  flex-shrink: 0;
  margin-top: 0.125rem;
  border: none;
  border-radius: 0.625rem;
  background: var(--color-recharge-help-bg);
  color: var(--color-text-secondary);
  text-align: left;
  padding: 0.625rem 0.75rem;
  font-size: var(--font-size-body);
  font-weight: 700;
  cursor: pointer;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.help-btn span[data-v-6460bf5f] {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.help-btn small[data-v-6460bf5f] {
  color: var(--color-text-secondary);
  font-size: 0.625rem;
  font-weight: 600;
}
.skeleton-small-title[data-v-6460bf5f],
.skeleton-small-price[data-v-6460bf5f],
.skeleton-line[data-v-6460bf5f],
.skeleton-badge[data-v-6460bf5f],
.skeleton-limit[data-v-6460bf5f] {
  background: linear-gradient(90deg, var(--color-recharge-skeleton-a) 25%, var(--color-recharge-skeleton-b) 50%, var(--color-recharge-skeleton-a) 75%);
  background-size: 200% 100%;
  animation: rechargeSkeleton-6460bf5f 1.4s ease infinite;
}
.skeleton-small-title[data-v-6460bf5f] {
  width: 62%;
  height: 1.25rem;
  border-radius: 0.5rem;
}
.skeleton-small-price[data-v-6460bf5f] {
  width: 48%;
  height: 1.75rem;
  border-radius: 0.5rem;
}
.skeleton-line[data-v-6460bf5f] {
  width: 100%;
  height: 0.875rem;
  border-radius: 0.4375rem;
}
.skeleton-line-short[data-v-6460bf5f] {
  width: 72%;
}
.skeleton-badge[data-v-6460bf5f] {
  width: 100%;
  height: 1.625rem;
  border-radius: 0.375rem;
  margin-top: auto;
}
.skeleton-limit[data-v-6460bf5f] {
  width: 40%;
  height: 0.875rem;
  border-radius: 0.4375rem;
}
@keyframes rechargeSkeleton-6460bf5f {
0% {
    background-position: 200% 0;
}
100% {
    background-position: -200% 0;
}
}
.coupon-zone[data-v-6460bf5f] {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding-right: 0.25rem;
}
.coupon-loading[data-v-6460bf5f],
.coupon-empty[data-v-6460bf5f] {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 12.5rem;
  color: var(--color-text-secondary);
  font-size: 1rem;
}
.coupon-grid[data-v-6460bf5f] {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.coupon-card[data-v-6460bf5f] {
  width: 21.875rem;
  height: 18.75rem;
  display: flex;
  flex-direction: column;
  border-radius: 1.5rem;
  background: var(--color-recharge-coupon-card-bg);
  border: 0.0625rem solid var(--color-recharge-coupon-card-border);
  overflow: hidden;
  flex-shrink: 0;
}
.coupon-top[data-v-6460bf5f] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.375rem 1.5rem;
  background: var(--color-recharge-coupon-top-bg);
}
.coupon-head[data-v-6460bf5f] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.coupon-icon-box[data-v-6460bf5f] {
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.coupon-icon[data-v-6460bf5f] {
  font-size: 1.75rem;
  color: var(--color-recharge-coupon-icon);
}
.coupon-qty[data-v-6460bf5f] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: flex-end;
}
.coupon-qty-label[data-v-6460bf5f] {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-recharge-coupon-qty-label);
  letter-spacing: 0.03125rem;
}
.coupon-qty-num[data-v-6460bf5f] {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-recharge-coupon-qty-num);
}
.coupon-title[data-v-6460bf5f] {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-recharge-coupon-title);
}
.coupon-desc[data-v-6460bf5f] {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-recharge-coupon-desc);
  line-height: 1.5;
}
.coupon-bottom[data-v-6460bf5f] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: var(--color-recharge-coupon-bottom-bg);
  border-top: 0.0625rem solid var(--color-recharge-coupon-bottom-border);
}
.coupon-time-box[data-v-6460bf5f] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.coupon-time-label[data-v-6460bf5f] {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-recharge-coupon-time-label);
}
.coupon-time-text[data-v-6460bf5f] {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-recharge-coupon-time-text);
}
.coupon-claim-btn[data-v-6460bf5f] {
  width: 7rem;
  height: 3rem;
  border: none;
  border-radius: 0.75rem;
  background: var(--color-recharge-coupon-btn-bg);
  color: var(--color-recharge-coupon-btn-text);
  font-size: 1.125rem;
  font-weight: 800;
  cursor: pointer;
  transition: opacity 0.2s;
  flex-shrink: 0;
}
.coupon-claim-btn[data-v-6460bf5f]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.coupon-claim-btn[data-v-6460bf5f]:hover:not(:disabled) {
  opacity: 0.85;
}
/* CSS Variables and Global Styles */
:root,
html[data-theme='light'],
body[data-theme='light'],
.theme-light {
    --spacing: 0.0625rem;

    /* Typography */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
        "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-size-page-title: 1.75rem;
    /* 30 */
    --font-size-submit-title: 1.75rem;
    /* 28 */
    --font-size-primary-desc: 0.875rem;
    /* 14 */
    --font-size-card-title: 1rem;
    /* 16 */
    --font-size-field-label: 0.875rem;
    /* 14 */
    --font-size-body: 0.75rem;
    /* 12 */
    --font-size-primary: 1rem;
    --font-size-secondary: 0.875rem;
    --font-size-tertiary: 0.75rem;
    /* 11 */

    /* Layout */
    --layout-canvas-width: 120rem;
    /* 1920 */
    --layout-canvas-height: 56.875rem;
    /* 910 */
    --layout-page-padding: 1rem 1.5rem;
    /* 16 24 */
    --layout-main-gap: 1.5rem;
    /* 24 */
    --layout-content-gap: 0.75rem;
    /* 12 */
    --layout-sidebar-width: 18.75vw;
    /* 360 / 1920 */
    --layout-sidebar-padding: 0.75rem 1rem;
    /* 12 16 */

    /* Radius */
    --radius-level-1: 1.5rem;
    /* 24 */
    --radius-level-2: 1rem;
    /* 16 */
    --radius-card-sm: 0.75rem;
    /* 12 */
    --radius-card-md: 1rem;
    /* 16 */
    --radius-button-sm: 0.625rem;
    /* 10 */
    --radius-button-md: 0.75rem;
    /* 12 */
    --radius-pill: 62.4375rem;
    /* 999 */

    /* Effect */
    --blur-panel: 0.5rem;
    /* 8 */

    /* Light mode */
    --color-bg-start: #f2f2f5;
    --color-bg-end: #f2f2f5;
    --surface-color: #F8F8FA;
    --surface-padding: 1rem 1.5rem;
    --surface-radius: 1rem;
    --surface-secondary-color: #ffffff;
    --surface-secondary-padding: 0.75rem 1rem;
    /* 输入框 */
    --color-input-bg: #E5E5EA;
    --color-input-border: 0.0625rem solid #D1D1D6;
    --color-border: 0.0625rem solid #D1D1D6;
    --color-divider: #e5e7eb;
    --color-text-primary: #111827;
    --color-text-secondary: #6b7280;
    --color-text-muted: #6b7280;
    --color-text-supporting: #6b7280;
    --color-accent-primary: #4298c7;
    --color-accent-secondary: #1f6f9a;
    --color-selected-bg-start: #eaf4fb;
    --color-selected-bg-end: #eaf4fb;
    --color-selected-border: #4298c7;
    --color-selected-text: #1f6f9a;
    --color-page-backdrop: #f2f2f5;
    --color-modal-backdrop: rgba(17, 24, 39, 0.3);
    --color-message-wrap-bg: #ffffff;
    --color-message-item-bg: #f9fafb;
    --color-message-success: #22c55e;
    --color-message-error: #ef4444;
    --color-message-info: #4298c7;
    --color-message-warning: #f59e0b;
    --color-shell-border: #dfe7f1;
    --color-brand-panel: #f9fbff;
    --color-nav-shell: #ffffff;
    --color-nav-item-bg: #ffffff;
    --color-nav-hover-border: #d7e3f2;
    --color-nav-active-bg: #4a9ac9;
    --color-nav-active-border: #4a9ac9;
    --color-nav-active-text: #ffffff;
    --color-status-dot: #f4a621;
    --color-card-elevated: #ffffff;
    --color-user-center-card-bg: #ffffff;
    --color-user-center-item-bg: #f8fafc;
    --color-user-center-title-marker: #4298c7;
    --color-theme-shell: #f4f7fb;
    --color-theme-active-bg: #4a9ac9;
    --color-theme-active-border: #4a9ac9;
    --color-theme-active-text: #ffffff;
    --tab-shell: #ffffff;
    --tab-active-bg: #4a9ac9;
    --tab-active-border: #4a9ac9;
    --tab-active-text: #ffffff;
    --color-progress-track: #f9fafb;
    --color-progress-track-border: #e5e7eb;
    --color-progress-fill: #f59e0b;
    --color-progress-number: #f59e0b;
    --color-asset-number: #f59e0b;
    --gradient-progress-fill: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
    --color-charge-border: #4a9ac9;
    --color-charge-text: #ffffff;
    --color-card-cover-border: #d7deef;
    --color-tag-bg: #fff7ea;
    --color-tag-border: #f0d9a8;
    --color-tag-text: #b88214;
    --color-empty-bar: #ffffff;
    --gradient-charge-bg: #4298C7;
    --gradient-submit-bg: linear-gradient(90deg, #ffb000 0%, #ff9f00 100%);
    --gradient-avatar-bg: linear-gradient(135deg, #d9c2ff 0%, #b89cff 100%);
    --color-submit-border: #ff9f00;
    --color-submit-text: #ffffff;
    --color-demo-card-a-start: #b3b8f0;
    --color-demo-card-a-end: #c6caf7;
    --color-demo-card-b-start: #ffc8ab;
    --color-demo-card-b-end: #ffd3bb;
    --shadow-shell: 0 0.75rem 1.875rem rgba(70, 96, 141, 0.04);
    --shadow-panel: 0 0.375rem 1.125rem rgba(70, 96, 141, 0.03);
    --shadow-panel-soft: 0 0.25rem 0.875rem rgba(70, 96, 141, 0.04);
    --shadow-message: 0 1rem 2.625rem rgba(17, 24, 39, 0.16);
    --shadow-nav-active: 0 0.5rem 1.25rem rgba(74, 154, 201, 0.2);
    --shadow-theme-toggle: 0 0.125rem 0.5rem rgba(70, 96, 141, 0.04);
    --shadow-theme-active: 0 0.5rem 1.125rem rgba(74, 154, 201, 0.16);
    --shadow-tab-active: 0 0.625rem 1.375rem rgba(74, 154, 201, 0.14);
    --shadow-charge: 0 0.625rem 1.25rem rgba(74, 154, 201, 0.18);
    --shadow-submit: none;
    --shadow-avatar: 0 0.375rem 1.125rem rgba(184, 156, 255, 0.32);

    /* Task manage */
    --color-task-panel-bg: #ffffff;
    --color-task-panel-inner: #ffffff;
    --color-task-control-bg: #f3f6fa;
    --color-task-control-border: #e3e9f0;
    --color-task-control-text: #6b7280;
    --color-task-search-bg: #4a9ac9;
    --color-task-search-text: #ffffff;
    --color-task-card-bg: #ffffff;
    --color-task-card-hover-border: #bed5e7;
    --color-task-thumb-a-start: #33d2e2;
    --color-task-thumb-a-end: #2f51d4;
    --color-task-thumb-b-start: #29afe2;
    --color-task-thumb-b-end: #264ab8;
    --color-task-thumb-c-start: #20bf6f;
    --color-task-thumb-c-end: #2f58d2;
    --color-task-thumb-d-start: #19b6df;
    --color-task-thumb-d-end: #8f49e2;
    --color-task-action-bg: #f3f6fb;
    --color-task-action-border: #e5e7eb;
    --color-task-action-text: #111827;
    --color-task-action-hover-bg: #eaf4fb;
    --color-task-action-hover-border: #89B8D7;
    --color-task-delete-bg: transparent;
    --color-task-delete-border: transparent;
    --color-task-delete-hover-bg: #FDE8E8;
    --color-task-delete-hover-border: #DF7B7B;
    --color-task-delete-active-bg: #FDD5D5;
    --color-task-delete-active-border: #D22C2C;
    --color-task-delete-icon: #ef4444;
    --color-task-delete-icon-hover: #dc2626;
    --color-task-page-btn-bg: #f4f7fb;
    --color-task-page-btn-border: #dbe4ef;
    --color-task-page-btn-text: #8b96a9;
    --color-task-page-btn-active-bg: #4a9ac9;
    --color-task-page-btn-active-border: #4a9ac9;
    --color-task-page-btn-active-text: #ffffff;
    --color-task-warn-text: #fbbf24;
    --color-task-error-text: #fca5a5;
    --color-task-success-text: #86efac;
    --color-task-status-complete-bg: #E3F0F7;
    --color-task-status-complete-border: #89B8D7;
    --color-task-status-complete-text: #4298c7;
    --color-task-status-queue-bg: #FEF3DF;
    --color-task-status-queue-border: #CB8B0B;
    --color-task-status-queue-text: #fbbf24;
    --color-task-status-running-bg: #DFF9EC;
    --color-task-status-running-border: #189F45;
    --color-task-status-running-text: #86efac;
    --color-task-status-failed-bg: #FDE8E8;
    --color-task-status-failed-border: #D22C2C;
    --color-task-status-failed-text: #fca5a5;

    /* Task detail */
    --color-task-detail-shell: #f3f4f6;
    --color-task-detail-stage-bg: #f3f4f6;
    --color-task-detail-stage-shell: #ffffff;
    --color-task-detail-strip-bg: #FFFFFF;
    --color-task-detail-side-bg: #FFFFFF;
    --color-task-detail-thumb-border: #d9dee7;
    --color-task-detail-thumb-active-border: #4a9ac9;
    --color-task-detail-divider: #f0b24f;
    --color-task-detail-handle-bg: #ffffff;
    --color-task-detail-handle-border: #f0b24f;
    --color-task-detail-handle-icon: #f0b24f;
    --color-task-detail-status-success: rgba(22, 163, 74, 1);
    --color-task-detail-btn-secondary-bg: #ffffff;
    --color-task-detail-btn-secondary-border: #8cc0df;
    --color-task-detail-btn-secondary-text: #2f81b0;
    --color-task-detail-btn-primary-bg: #4a9ac9;
    --color-task-detail-btn-primary-border: #4a9ac9;
    --color-task-detail-btn-primary-text: #ffffff;

    /* Recharge */
    --color-recharge-page-bg: #c8c8c8;
    --color-recharge-shell-bg: #F8F8FA;
    --color-recharge-close-bg: #eef1f4;
    --color-recharge-card-bg: #FFFFFF;
    --color-recharge-card-border: 0.0625rem solid #D1D1D6;
    --color-recharge-section-title: #636366;
    --color-recharge-active-bg: #EAF4FB;
    --color-recharge-active-border: #4298C7;
    --color-recharge-active-shadow: #4298C733;
    --color-recharge-power-box-bg: #F8F8FA;
    --color-recharge-power-box-border: #D1D1D6;
    --color-recharge-low-tag-bg: #FFE7F2;
    --color-recharge-low-tag-border: #FF6CAD;
    --color-recharge-low-tag-text: #C2185B;
    --color-recharge-tag-bg: #e8edf5;
    --color-recharge-tag-text: #374153;
    --color-recharge-tag-price-bg: #d7c6ff;
    --color-recharge-tag-price-text: #6b49cc;
    --color-recharge-price: #1f6f9a;
    --color-recharge-origin: #9CA3AF;
    --color-recharge-origin-line: #9CA3AF;
    --color-recharge-power-bg: #edf1f6;
    --color-recharge-limit-bg: #d2e7f7;
    --color-recharge-limit-text: #48484a;
    --color-recharge-desc: #636366;
    --color-recharge-badge-bg: #E5E5EA;
    --color-recharge-badge-text: #D97706;
    --color-recharge-badge-time: #D97706;
    --color-recharge-pay-bg: #F8F8FA;
    --color-recharge-divider: #D1D1D6;
    --color-recharge-switch-bg: #E5E5EA;
    --color-recharge-switch-border: #D1D1D6;
    --color-recharge-switch-active-bg: #FFFFFF;
    --color-recharge-switch-active-border: #93C5FD;
    --color-recharge-switch-active-text: #1c1c1e;
    --color-recharge-switch-inactive-text: #9ca3af;
    --color-recharge-safe-text: #1F2937;
    --color-recharge-qrcode-shell: #FFFFFF;
    --color-recharge-qrcode-border: #cfd5de;
    --color-recharge-qrcode-a: #e8e9eb;
    --color-recharge-qrcode-b: #cacdcf;
    --color-recharge-note-bg: #E5E5EA;
    --color-recharge-help-bg: #E5E5EA;
    --color-recharge-skeleton-a: rgba(255, 255, 255, 0.42);
    --color-recharge-skeleton-b: rgba(255, 255, 255, 0.7);
    --color-recharge-tab-bg: #FFFFFF;
    --color-recharge-tab-border: #D6E7F3;
    --color-recharge-tab-inactive: #636366;
    --color-recharge-tab-active-text: #FFFFFF;
    --color-recharge-tab-active-bg: #4298C7;
    --color-recharge-coupon-card-bg: #FFFFFF;
    --color-recharge-coupon-card-border: #D1D1D6;
    --color-recharge-coupon-top-bg: #FFFFFF;
    --color-recharge-coupon-icon: #4298C7;
    --color-recharge-coupon-qty-label: #9CA3AF;
    --color-recharge-coupon-qty-num: #F59E0B;
    --color-recharge-coupon-title: #1c1c1e;
    --color-recharge-coupon-desc: #636366;
    --color-recharge-coupon-bottom-bg: #E5E5EA;
    --color-recharge-coupon-bottom-border: #D1D1D6;
    --color-recharge-coupon-time-label: #8E8E93;
    --color-recharge-coupon-time-text: #374151;
    --color-recharge-coupon-btn-bg: #4298C7;
    --color-recharge-coupon-btn-text: #FFFFFF;
    --color-recharge-product-label-bg: #FFF4D6;
    --color-recharge-product-label-border: #F59E0B;
    --color-recharge-product-label-text: #B45309;
    /* 弹框通用 */
    --color-modal-result-border: #D1D1D6;
    --color-modal-result-title: #1c1c1e;
    --color-modal-result-desc: #636366;
    --color-modal-result-tip-bg: #FFF7E8;
    --color-modal-result-tip-border: #F5D7A1;
    --color-modal-result-tip-text: #B7791F;
    --color-modal-result-primary-bg: #4298C7;
    --color-modal-result-primary-border: #4298C7;
    --color-modal-result-primary-text: #FFFFFF;
    --color-modal-result-secondary-bg: #FFFFFF;
    --color-modal-result-secondary-border: #4298C7;
    --color-modal-result-secondary-text: #1F6F9A;
    /* 成功弹框 light */
    --color-modal-success-ring1-bg: #EAF4FB;
    --color-modal-success-ring1-border: #93C5FD;
    --color-modal-success-ring2-bg: #DDEFF8;
    --color-modal-success-icon-bg: #EFF6FF;
    --color-modal-success-icon-border: #4298C7;
    --color-modal-success-icon-fill: #4298C7;
    /* 删除弹框 light */
    --color-modal-delete-badge-bg: #FFF3EE;
    --color-modal-delete-badge-border: #E8B9AD;
    --color-modal-delete-icon-fill: #e83c3cff;
    --color-modal-delete-tip-bg: #FFF7F3;
    --color-modal-delete-tip-border: #E8B9AD;
    --color-modal-delete-tip-text: #b52d2dff;
    --color-modal-delete-primary-bg: #4298C7;
    --color-modal-delete-primary-border: #4298C7;
    --color-modal-delete-primary-text: #FFFFFF;
    --color-modal-delete-secondary-bg: #FFFFFF;
    --color-modal-delete-secondary-border: #4298C7;
    --color-modal-delete-secondary-text: #1F6F9A;
    /* 领券成功弹框 light */
    --color-modal-coupon-success-ring1: #EAF4FB;
    --color-modal-coupon-success-ring1-border: #93C5FD;
    --color-modal-coupon-success-ring2: #DDEFF8;
    --color-modal-coupon-success-icon-bg: #EFF6FF;
    --color-modal-coupon-success-icon-border: #4298C7;
    --color-modal-coupon-success-icon-fill: #4298C7;
    --color-modal-coupon-success-title: #1c1c1e;
    --color-modal-coupon-success-desc: #636366;
    --color-modal-coupon-success-tip-bg: #F8F8FA;
    --color-modal-coupon-success-tip-border: #D1D1D6;
    --color-modal-coupon-success-tip-text: #636366;
    --color-modal-coupon-success-btn-primary-bg: #4298C7;
    --color-modal-coupon-success-btn-primary-border: #4298C7;
    --color-modal-coupon-success-btn-primary-text: #FFFFFF;
    --color-modal-coupon-success-btn-secondary-bg: #FFFFFF;
    --color-modal-coupon-success-btn-secondary-border: #4298C7;
    --color-modal-coupon-success-btn-secondary-text: #1F6F9A;
    --color-modal-coupon-success-footer-text: #8E8E93;
    /* 侧边栏-服务按钮 light */
    --color-service-btn-bg: #FFFFFF;
    --color-service-btn-border: #D1D1D6;
    --color-service-btn-text: #1c1c1e;
    --color-service-btn-icon: #4298C7;
}

:root[data-theme='dark'],
html[data-theme='dark'],
body[data-theme='dark'],
.theme-dark {
    /* Dark effect */
    --blur-panel: 0.75rem;
    /* 12 */

    /* Dark mode */
    --surface-color: #232435;
    --surface-secondary-color: #2a2b3a;
    --tab-shell: #2a2b3a;
    /* 次板：Tab 本质上也是卡片，与 --surface-secondary-color 一致 */
    --tab-active-bg: linear-gradient(90deg, #0F4F5F, #122F3C);
    --tab-active-border: 0.0625rem solid #0893A7;
    --tab-active-text: #ffffff;
    --color-bg-start: #0b0f19;
    --color-bg-end: #1a1a2e;
    /* 输入框 */
    --color-input-bg: #0B1020;
    --color-input-border: 0.0625rem solid rgba(255, 255, 255, 0.102);
    --color-border: 0.0625rem solid #3D4255;
    --color-divider: #3D4255;
    --color-text-primary: #ffffff;
    --color-text-secondary: #dbe2fb;
    --color-text-muted: #b9c1d9;
    --color-text-supporting: #8fa0c8;
    --color-accent-primary: #00e5ff;
    --color-accent-secondary: #C9F8FF;
    --color-selected-bg-start: #0F4F5F;
    --color-selected-bg-end: #122F3C;
    --color-selected-border: #0893A7;
    --color-selected-text: #ffffff;
    --color-page-backdrop: #141824;
    --color-modal-backdrop: rgba(17, 24, 39, 0.5);
    --color-message-wrap-bg: #252938;
    --color-message-item-bg: #303544;
    --color-message-success: #22c55e;
    --color-message-error: #f87171;
    --color-message-info: #00e5ff;
    --color-message-warning: #fbbf24;
    --color-shell-border: #242938;
    --color-brand-panel: #2c3040;
    --color-nav-shell: #2a2d3d;
    --color-nav-item-bg: #313344;
    --color-nav-hover-border: #41465d;
    --color-nav-active-bg: #25576a;
    --color-nav-active-border: #15d8ff;
    --color-nav-active-text: #f7fdff;
    --color-status-dot: #16e6ff;
    --color-card-elevated: #2d3040;
    --color-user-center-card-bg: #1D212C;
    --color-user-center-item-bg: #1D212C;
    --color-user-center-title-marker: #272A35;
    --color-theme-shell: #2b2f3e;
    --color-theme-active-bg: #25576a;
    --color-theme-active-border: #16d7ff;
    --color-theme-active-text: #f7fdff;
    --color-progress-track: #272A35;
    --color-progress-track-border: #373B48;
    --color-progress-fill: #00e5ff;
    --color-progress-number: #00e5ff;
    --color-asset-number: #7efbff;
    --gradient-progress-fill: linear-gradient(90deg, #00e5ff 0%, #7efbff 100%);
    --color-charge-border: #27d7f8;
    --color-charge-text: #f7fdff;
    --color-card-cover-border: #2f364a;
    --color-tag-bg: #351934;
    --color-tag-border: #722D5A;
    --color-tag-text: #ff71bb;
    --color-empty-bar: #2d3040;
    --gradient-charge-bg-compatible: #4FD8EA;
    --gradient-charge-bg: linear-gradient(90deg, #00B8D9 0%, #4FD8EA 100%);
    --gradient-submit-bg: linear-gradient(90deg, #00b8d9 0%, #00b8d9 100%);
    --gradient-avatar-bg: linear-gradient(135deg, #d9c7ff 0%, #a18cff 100%);
    --color-submit-border: #00b8d9;
    --color-submit-text: #f7fbff;
    --color-demo-card-a-start: #b78fcc;
    --color-demo-card-a-end: #58d8d2;
    --color-demo-card-b-start: #1870ea;
    --color-demo-card-b-end: #1db4e3;
    --shadow-shell: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.22);
    --shadow-panel: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
    --shadow-panel-soft: 0 0.25rem 1.125rem rgba(0, 0, 0, 0.12);
    --shadow-message: 0 1.125rem 3rem rgba(0, 0, 0, 0.34);
    --shadow-nav-active: 0 0 0 0.0625rem rgba(22, 215, 255, 0.18), 0 0.625rem 1.25rem rgba(11, 229, 255, 0.1);
    --shadow-theme-toggle: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.12);
    --shadow-theme-active: 0 0 0 0.0625rem rgba(22, 215, 255, 0.2), 0 0.75rem 1.5rem rgba(11, 229, 255, 0.1);
    --shadow-tab-active: 0 0 0 0.0625rem rgba(22, 215, 255, 0.2), 0 0.625rem 1.25rem rgba(11, 229, 255, 0.08);
    --shadow-charge: 0 0.75rem 1.5rem rgba(24, 180, 227, 0.16);
    --shadow-submit: 0 0.625rem 1.5rem rgba(0, 184, 217, 0.26);
    --shadow-avatar: 0 0.375rem 1.125rem rgba(161, 140, 255, 0.24);

    /* Task manage */
    --color-task-panel-bg: #202536;
    --color-task-panel-inner: #202536;
    --color-task-control-bg: #272d3d;
    --color-task-control-border: #3a435a;
    --color-task-control-text: #b8c3db;
    --color-task-search-bg: #1ad9f4;
    --color-task-search-text: #083143;
    --color-task-card-bg: #262b3d;
    --color-task-card-hover-border: #3a8ea3;
    --color-task-thumb-a-start: #32cee2;
    --color-task-thumb-a-end: #2f4fd3;
    --color-task-thumb-b-start: #20b2e3;
    --color-task-thumb-b-end: #2d47bc;
    --color-task-thumb-c-start: #1fbf6c;
    --color-task-thumb-c-end: #2f57d3;
    --color-task-thumb-d-start: #20b8de;
    --color-task-thumb-d-end: #8f4be1;
    --color-task-action-bg: #222531;
    --color-task-action-border: #303544;
    --color-task-action-text: #dbe2fb;
    --color-task-action-hover-bg: linear-gradient(135deg, #00E5FF33, #00E5FF1A);
    /* 暗黑模式 hover 渐变色 */
    --color-task-action-hover-border: #0C6A7B;
    --color-task-delete-bg: transparent;
    --color-task-delete-border: transparent;
    --color-task-delete-hover-bg: #351F29;
    --color-task-delete-hover-border: #715058;
    --color-task-delete-active-bg: #40212A;
    --color-task-delete-active-border: #8F6368;
    --color-task-delete-icon: #fca5a5;
    --color-task-delete-icon-hover: #ffb4b4;
    --color-task-page-btn-bg: #272c3d;
    --color-task-page-btn-border: #3a435a;
    --color-task-page-btn-text: #95a1bd;
    --color-task-page-btn-active-bg: #25576a;
    --color-task-page-btn-active-border: #16d7ff;
    --color-task-page-btn-active-text: #f7fdff;
    --color-task-warn-text: #fbbf24;
    --color-task-error-text: #fca5a5;
    --color-task-success-text: #86efac;
    --color-task-status-complete-bg: #113340;
    --color-task-status-complete-border: #0C6A7B;
    --color-task-status-complete-text: #7efbff;
    --color-task-status-queue-bg: #312921;
    --color-task-status-queue-border: #6E4D1A;
    --color-task-status-queue-text: #fbbf24;
    --color-task-status-running-bg: #162E2C;
    --color-task-status-running-border: #1A5D3B;
    --color-task-status-running-text: #86efac;
    --color-task-status-failed-bg: #311E28;
    --color-task-status-failed-border: #6C2A31;
    --color-task-status-failed-text: #fca5a5;

    /* Task detail */
    --color-task-detail-shell: #1d2231;
    --color-task-detail-stage-bg: #08143a;
    --color-task-detail-stage-shell: #0b163d;
    --color-task-detail-strip-bg: #202130;
    --color-task-detail-side-bg: #202130;
    --color-task-detail-thumb-border: #2f8ca2;
    --color-task-detail-thumb-active-border: #11d7ff;
    --color-task-detail-divider: #11d7ff;
    --color-task-detail-handle-bg: #091d40;
    --color-task-detail-handle-border: #11d7ff;
    --color-task-detail-handle-icon: #11d7ff;
    --color-task-detail-status-success: rgba(82, 214, 126, 1);
    --color-task-detail-btn-secondary-bg: #273347;
    --color-task-detail-btn-secondary-border: #11d7ff;
    --color-task-detail-btn-secondary-text: #d8f9ff;
    --color-task-detail-btn-primary-bg: #1f7dab;
    --color-task-detail-btn-primary-border: #11d7ff;
    --color-task-detail-btn-primary-text: #f1fcff;

    /* Recharge */
    --color-recharge-page-bg: #070e23;
    --color-recharge-shell-bg: #1a1f2e;
    --color-recharge-close-bg: #2d3344;
    --color-recharge-card-bg: #FFFFFF08;
    --color-recharge-card-border: 0.0625rem solid #FFFFFF1F;
    --color-recharge-section-title: #B9C1D9;
    --color-recharge-active-bg: #102337;
    --color-recharge-active-border: #00E5FFCC;
    --color-recharge-active-shadow: #00e5ff33;
    --color-recharge-power-box-bg: #0C193A;
    --color-recharge-power-box-border: #FFFFFF24;
    --color-recharge-low-tag-bg: #FF007F22;
    --color-recharge-low-tag-border: #FF007F66;
    --color-recharge-low-tag-text: #FFD1E8;
    --color-recharge-tag-bg: #2f384f;
    --color-recharge-tag-text: #d2dcf3;
    --color-recharge-tag-price-bg: #473b8c;
    --color-recharge-tag-price-text: #c9bdff;
    --color-recharge-price: #AFC7FF;
    --color-recharge-origin: #8fa0c8;
    --color-recharge-origin-line: #9CA3AF;
    --color-recharge-power-bg: #10295a;
    --color-recharge-limit-bg: #35466a;
    --color-recharge-limit-text: #b9c1d9;
    --color-recharge-desc: #b9c1d9;
    --color-recharge-badge-bg: #3B446033;
    --color-recharge-badge-text: #F7C67E;
    --color-recharge-badge-time: #F7C67E;
    --color-recharge-pay-bg: #FFFFFF0D;
    --color-recharge-divider: #FFFFFF14;
    --color-recharge-switch-bg: #0C193A;
    --color-recharge-switch-border: transparent;
    --color-recharge-switch-active-bg: #1E2D55;
    --color-recharge-switch-active-border: #5276b3;
    --color-recharge-switch-active-text: #8fa0c8;
    --color-recharge-switch-inactive-text: #b9c1d9;
    --color-recharge-safe-text: #8fa0c8;
    --color-recharge-qrcode-shell: #ffffff0d;
    --color-recharge-qrcode-border: #434a5e;
    --color-recharge-qrcode-a: #2a2f3d;
    --color-recharge-qrcode-b: #5c6070;
    --color-recharge-note-bg: #0c255d;
    --color-recharge-help-bg: #0a2459;
    --color-recharge-skeleton-a: rgba(255, 255, 255, 0.08);
    --color-recharge-skeleton-b: rgba(255, 255, 255, 0.18);
    --color-recharge-tab-bg: #0B1020;
    --color-recharge-tab-border: #5276B3;
    --color-recharge-tab-inactive: #B9C1D9;
    --color-recharge-tab-active-text: #FFFFFF;
    --color-recharge-tab-active-bg: #3388FF;
    --color-recharge-coupon-card-bg: #111A2C;
    --color-recharge-coupon-card-border: #2A3A55;
    --color-recharge-coupon-top-bg: #111A2C;
    --color-recharge-coupon-icon: #61A8FF;
    --color-recharge-coupon-qty-label: #68748C;
    --color-recharge-coupon-qty-num: #C9B8FF;
    --color-recharge-coupon-title: #F3F6FF;
    --color-recharge-coupon-desc: #AEBBD3;
    --color-recharge-coupon-bottom-bg: #1D2738;
    --color-recharge-coupon-bottom-border: #2A3A55;
    --color-recharge-coupon-time-label: #6E7B92;
    --color-recharge-coupon-time-text: #DBE2FB;
    --color-recharge-coupon-btn-bg: #3388FF;
    --color-recharge-coupon-btn-text: #FFFFFF;
    --color-recharge-product-label-bg: #FBBF24;
    --color-recharge-product-label-border: #F59E0B;
    --color-recharge-product-label-text: #3A2600;
    /* 弹框通用 dark */
    --color-modal-result-border: #FFFFFF1A;
    --color-modal-result-title: #F3F6FF;
    --color-modal-result-desc: #DBE2FB;
    --color-modal-result-tip-bg: #0B1020EE;
    --color-modal-result-tip-border: #FFFFFF24;
    --color-modal-result-tip-text: #ff7a7aff;
    --color-modal-result-primary-bg: #00B8D9;
    --color-modal-result-primary-border: #00B8D9;
    --color-modal-result-primary-text: #eaf2ff;
    --color-modal-result-secondary-bg: #FFFFFF10;
    --color-modal-result-secondary-border: #00e5ff99;
    --color-modal-result-secondary-text: #DBE2FB;
    /* 成功弹框 dark */
    --color-modal-success-ring1-bg: #304C7E;
    --color-modal-success-ring1-border: #5276B3;
    --color-modal-success-ring2-bg: #ffffff12;
    --color-modal-success-icon-bg: #ffffff12;
    --color-modal-success-icon-border: #5276B3;
    --color-modal-success-icon-fill: #1e2d55;
    /* 删除弹框 dark */
    --color-modal-delete-badge-bg: #3D282C;
    --color-modal-delete-badge-border: #7A4A45;
    --color-modal-delete-icon-fill: #e83c3cff;
    --color-modal-delete-tip-bg: #0B1020EE;
    --color-modal-delete-tip-border: #FFFFFF24;
    --color-modal-delete-tip-text: #ff7a7aff;
    --color-modal-delete-primary-bg: #00B8D9;
    --color-modal-delete-primary-border: #00B8D9;
    --color-modal-delete-primary-text: #eaf2ff;
    --color-modal-delete-secondary-bg: #FFFFFF10;
    --color-modal-delete-secondary-border: #00e5ff99;
    --color-modal-delete-secondary-text: #DBE2FB;
    /* 领券成功弹框 dark */
    --color-modal-coupon-success-ring1: #304C7E;
    --color-modal-coupon-success-ring1-border: #5276B3;
    --color-modal-coupon-success-ring2: #ffffff12;
    --color-modal-coupon-success-icon-bg: #ffffff12;
    --color-modal-coupon-success-icon-border: #5276B3;
    --color-modal-coupon-success-icon-fill: #1e2d55;
    --color-modal-coupon-success-title: #F3F6FF;
    --color-modal-coupon-success-desc: #DBE2FB;
    --color-modal-coupon-success-tip-bg: #0B1020EE;
    --color-modal-coupon-success-tip-border: #FFFFFF24;
    --color-modal-coupon-success-tip-text: #DBE2FB;
    --color-modal-coupon-success-btn-primary-bg: #00A9CC;
    --color-modal-coupon-success-btn-primary-border: #00E5FF;
    --color-modal-coupon-success-btn-primary-text: #eaf2ff;
    --color-modal-coupon-success-btn-secondary-bg: #FFFFFF10;
    --color-modal-coupon-success-btn-secondary-border: #00e5ff99;
    --color-modal-coupon-success-btn-secondary-text: #DBE2FB;
    --color-modal-coupon-success-footer-text: #8FA0C8;
    /* 侧边栏-服务按钮 dark */
    --color-service-btn-bg: #FFFFFF08;
    --color-service-btn-border: #FFFFFF1A;
    --color-service-btn-text: #DBE2FB;
    --color-service-btn-icon: #00E5FF;
}

html {
    font-size: calc(100vw / 120);
}

@media (max-width: 1440px) {
    html {
        font-size: calc(100vw / 90);
    }

    :root,
    html[data-theme='light'],
    body[data-theme='light'],
    .theme-light {
        --layout-sidebar-width: 25vw;
    }
}

html,
body,
#app {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-family-base);
    background: var(--color-page-backdrop);
}

*,
*::before,
*::after {
    box-sizing: inherit;
    font-family: var(--font-family-base);
}

input[type='number'] {
    appearance: textfield;
    -moz-appearance: textfield;
}

input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}