/* v2board-login-transparent: only the login rectangle is translucent; page background stays sharp (no blur). */

.subscription-auto-renew-control {
  position: absolute;
  right: 16px;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  transform: translateY(-50%);
  text-align: right;
  z-index: 2;
}

.subscription-auto-renew-control__row {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.subscription-auto-renew-control__detail {
  margin-right: 3px;
}

.subscription-auto-renew-control__title {
  margin-right: 8px;
}

.subscription-auto-renew-control__detail,
.subscription-auto-renew-control__title {
  color: #111827;
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
}

.subscription-auto-renew-control__detail {
  cursor: pointer;
  user-select: none;
}

.subscription-auto-renew-control__detail:focus-visible {
  outline: 2px solid #343a40;
  outline-offset: 2px;
  border-radius: 3px;
}

.subscription-auto-renew-switch {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  width: 36px;
  height: 18px;
  cursor: pointer;
  flex: 0 0 36px;
  transform: translateY(3px);
}

.subscription-auto-renew-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.subscription-auto-renew-switch__slider {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.25);
  transition: all 0.36s;
}

.subscription-auto-renew-switch__slider::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 14px;
  height: 14px;
  border-radius: 14px;
  background-color: #fff;
  box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
  transition: all 0.36s cubic-bezier(.78,.14,.15,.86);
}

.subscription-auto-renew-switch input:checked + .subscription-auto-renew-switch__slider {
  background-color: #343a40;
}

.subscription-auto-renew-switch input:checked + .subscription-auto-renew-switch__slider::before {
  left: 100%;
  margin-left: -1px;
  transform: translateX(-100%);
}

.subscription-auto-renew-switch input:focus-visible + .subscription-auto-renew-switch__slider {
  outline: 2px solid #0f766e;
  outline-offset: 2px;
}

.subscription-auto-renew-switch input:disabled + .subscription-auto-renew-switch__slider {
  opacity: 0.55;
  cursor: wait;
}

/* Preserve the reference switch's dark ON state while the toggle request is pending. */
.subscription-auto-renew-switch input:checked:disabled + .subscription-auto-renew-switch__slider {
  opacity: 1;
}

@media (max-width: 575px) {
  .subscription-auto-renew-control {
    right: 16px;
    width: auto;
  }
}

/* Explicitly prevent page/background blur on login. */
html body.page-login,
html body.page-login #page-container,
html body.page-login #main-container,
html body.page-login .hero,
html body.page-login .bg-image,
html body.page-login .bg-image-fixed,
html body #page-container.main-content-boxed,
html body .v2board-auth-box,
html body .v2board-auth-box::before,
html body .v2board-auth-box::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

/* Login card rectangle only: transparent color, NO backdrop blur. */
.v2board-auth-box .block.block-rounded.block-transparent.block-fx-pop {
  background: rgba(255, 255, 255, 0.18) !important;
  background-color: rgba(255, 255, 255, 0.18) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: 24px !important;
  box-shadow:
    0 12px 28px rgba(56, 68, 88, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

/* Inner panels fully transparent so only the outer rectangle tint shows. */
.v2board-auth-box .bg-white,
.v2board-auth-box .col-md-12.order-md-1.bg-white,
.v2board-auth-box .block-content,
.v2board-auth-box .block-content.block-content-full,
.v2board-auth-box .row,
.v2board-auth-box .content,
.v2board-auth-box .content.content-full {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

.v2board-auth-box .text-left.bg-gray-lighter {
  background: rgba(255, 255, 255, 0.16) !important;
  border-top: 1px solid rgba(103, 124, 154, 0.12);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Readable copy over artwork. */
.v2board-auth-box .text-muted,
.v2board-auth-box .font-size-sm,
.v2board-auth-box .text-left a,
.v2board-auth-box .text-left span {
  color: #161616 !important;
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.42);
}

.v2board-auth-box .mb-3.text-center .text-muted {
  color: #161616 !important;
  font-weight: 700;
}

.v2board-auth-box .form-control.form-control-alt {
  color: #2e3744;
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(103, 124, 154, 0.16) !important;
  border-radius: 14px;
  box-shadow:
    inset 0 1px 2px rgba(57, 71, 94, 0.04),
    0 1px 1px rgba(255, 255, 255, 0.38);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.v2board-auth-box .form-control.form-control-alt::placeholder {
  color: #3d4653;
  opacity: 1;
  font-weight: 600;
}

.v2board-auth-box .form-control.form-control-alt:focus {
  background: rgba(255, 255, 255, 0.86) !important;
  border-color: rgba(111, 166, 220, 0.62) !important;
  box-shadow:
    0 0 0 4px rgba(111, 166, 220, 0.16),
    inset 0 1px 2px rgba(57, 71, 94, 0.04);
}

.v2board-auth-box .btn.btn-primary {
  background: linear-gradient(135deg, #39495f 0%, #2f3846 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 14px;
  box-shadow:
    0 10px 22px rgba(41, 53, 70, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.v2board-auth-box .btn.btn-primary:hover,
.v2board-auth-box .btn.btn-primary:focus {
  background: linear-gradient(135deg, #435872 0%, #354151 100%) !important;
}

/* Mobile: same rule — transparent card only, never blur the page background. */
@media (max-width: 991.98px) {
  .v2board-auth-box,
  .v2board-auth-box .block,
  .v2board-auth-box .block.block-rounded {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    background: transparent !important;
    background-color: transparent !important;
  }

  .v2board-auth-box .block.block-rounded.block-transparent.block-fx-pop {
    background: rgba(255, 255, 255, 0.16) !important;
    background-color: rgba(255, 255, 255, 0.16) !important;
    background-image: none !important;
    border-radius: 20px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
  }

  .v2board-auth-box .bg-white,
  .v2board-auth-box .col-md-12,
  .v2board-auth-box .col-md-12.order-md-1.bg-white,
  .v2board-auth-box .block-content,
  .v2board-auth-box .block-content.block-content-full,
  .v2board-auth-box .row,
  .v2board-auth-box .content,
  .v2board-auth-box .content.content-full,
  .v2board-auth-box .py-4,
  .v2board-auth-box .px-4,
  .v2board-auth-box .p-4,
  .v2board-auth-box .p-sm-5 {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
  }

  .v2board-auth-box .form-control.form-control-alt {
    background: rgba(255, 255, 255, 0.72) !important;
  }
}

@media (prefers-color-scheme: dark) {
  .v2board-auth-box .block.block-rounded.block-transparent.block-fx-pop {
    background: rgba(255, 255, 255, 0.14) !important;
    background-color: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
  }
  .v2board-auth-box .bg-white,
  .v2board-auth-box .col-md-12.order-md-1.bg-white,
  .v2board-auth-box .block-content,
  .v2board-auth-box .row {
    background: transparent !important;
    background-color: transparent !important;
  }
  .v2board-auth-box .form-control.form-control-alt {
    background: rgba(255, 255, 255, 0.72) !important;
  }
  .v2board-auth-box .text-left.bg-gray-lighter {
    background: rgba(255, 255, 255, 0.14) !important;
  }
}

/* Wallet recharge — isolated route layer; no framework selectors are modified. */
/* Isolated wallet UI: no global element selectors. */
#wallet-route-layer .wallet-order-select:focus,#wallet-route-layer .wallet-order-select:focus-visible{outline:none!important;outline-offset:0;box-shadow:none!important}
#wallet-route-layer{position:fixed;inset:0;z-index:9000;overflow:auto;background:linear-gradient(155deg,#fff 0%,#fff 72%,#faedf3 72%,#f6e5ee 100%);color:#202126;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
#wallet-route-layer *{box-sizing:border-box}
#wallet-route-layer .wallet-page{min-height:100%;padding:76px 20px 88px}
#wallet-route-layer .wallet-card{position:relative;max-width:760px;min-height:555px;margin:0 auto;background:#fff;border:1px solid #e4e5e9;border-radius:13px;padding:38px 44px 34px;box-shadow:0 12px 28px rgba(35,45,71,.11)}
#wallet-route-layer .wallet-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
#wallet-route-layer h1,#wallet-route-layer h2,#wallet-route-layer p{margin:0}
#wallet-route-layer h1{font-size:31px;line-height:1.2;font-weight:650;letter-spacing:.01em}
#wallet-route-layer .wallet-card-head p{margin-top:8px;font-size:16px;color:#787b83}
#wallet-route-layer .wallet-orders-button{min-width:118px;border:0;border-radius:9px;padding:13px 17px;background:#f8a921;color:#fff;font-size:18px;font-weight:750;box-shadow:0 4px 8px rgba(146,97,12,.22);cursor:pointer}
#wallet-route-layer .wallet-orders-button span{display:inline-block;margin-right:7px;font-size:21px;line-height:0;transform:translateY(1px)}
#wallet-route-layer .wallet-balance{display:flex;align-items:baseline;gap:7px;margin-top:48px;color:#4563c8}
#wallet-route-layer .wallet-balance strong{font-size:47px;line-height:1;font-weight:760;letter-spacing:.01em}
#wallet-route-layer .wallet-balance span{font-size:27px;font-weight:700}
#wallet-route-layer h2{margin:45px 0 22px;font-size:27px;font-weight:680}
#wallet-route-layer .wallet-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
#wallet-route-layer .wallet-presets button{min-height:48px;border:0;border-radius:8px;background:#5e70c4;color:#fff;font-size:17px;font-weight:740;box-shadow:0 3px 7px rgba(44,59,132,.28);cursor:pointer;transition:transform .12s ease,background .12s ease}
#wallet-route-layer .wallet-presets button:hover{background:#5064bd;transform:translateY(-1px)}
#wallet-route-layer .wallet-custom-row{display:flex;gap:12px;align-items:end;margin-top:39px}
#wallet-route-layer .wallet-custom-input{width:100%;height:45px;border:0;border-bottom:2px solid #9ba0a9;background:transparent;color:#212329;font-size:18px;padding:7px 2px}
#wallet-route-layer .wallet-custom-input::placeholder{color:#aeb1b7}
#wallet-route-layer .wallet-confirm-amount{border:0;border-radius:8px;background:#4166ca;color:#fff;min-height:42px;padding:0 16px;white-space:nowrap;font-size:15px;font-weight:700;cursor:pointer}
#wallet-route-layer .wallet-message{min-height:22px;margin-top:15px;color:#586174;font-size:14px;line-height:1.5}
#wallet-route-layer .wallet-message.is-error{color:#c53538}
#wallet-route-layer .wallet-close-button,#wallet-route-layer .wallet-back-button{margin-top:18px;border:0;background:transparent;color:#5c6dc2;font-size:15px;font-weight:650;cursor:pointer;padding:0}
#wallet-route-layer .wallet-back-button{margin-top:4px;white-space:nowrap}
#wallet-route-layer .wallet-loading,#wallet-route-layer .wallet-empty{padding:60px 0;color:#7d8088;font-size:16px;text-align:center}
#wallet-route-layer .wallet-order-head{display:flex;justify-content:flex-end;margin-top:19px}
#wallet-route-layer .wallet-status{display:inline-flex;align-items:center;border-radius:999px;padding:7px 13px;color:#fff;font-size:14px;font-weight:700}
#wallet-route-layer .status-0{background:#e75a66}#wallet-route-layer .status-2{background:#8c929d}#wallet-route-layer .status-3{background:#39a76c}
#wallet-route-layer .wallet-order-detail{margin-top:19px;padding:3px 0 17px;border-bottom:1px solid #edf0f3}
#wallet-route-layer .wallet-order-detail p{display:flex;gap:11px;margin:15px 0;font-size:17px}#wallet-route-layer .wallet-order-detail span{color:#555a64;min-width:52px}#wallet-route-layer .wallet-order-detail b{color:#4563c8;overflow-wrap:anywhere}
#wallet-route-layer .wallet-pay-label{display:block;margin:26px 0 8px;color:#777;font-size:16px}
#wallet-route-layer .wallet-order-select{display:block;width:170px;height:42px;border:0;border-bottom:1px solid #ddd;border-radius:0;background:#fff;color:#1976d2;font-size:17px;padding:0 3px;cursor:pointer}
#wallet-route-layer .wallet-actions{display:flex;gap:0;margin-top:11px}#wallet-route-layer .wallet-actions button{border:0;border-radius:5px;min-height:45px;width:145px;padding:0;font-size:16px;font-weight:700;cursor:pointer}#wallet-route-layer .wallet-pay-button{background:#2196f3;color:#fff}#wallet-route-layer .wallet-pay-button:disabled{opacity:.6;cursor:wait}#wallet-route-layer .wallet-paid-note{margin-top:28px!important;color:#687080;font-size:15px}
#wallet-route-layer .wallet-order-filters{display:flex;gap:8px;margin-top:28px}#wallet-route-layer .wallet-order-filter{border:1px solid #d7dce7;border-radius:5px;background:#fff;color:#5f6774;padding:8px 12px;font:inherit;font-size:14px;cursor:pointer}#wallet-route-layer .wallet-order-filter.is-active{border-color:#2196f3;background:#eaf4ff;color:#1572bd;font-weight:700}
#wallet-route-layer .wallet-order-table{margin-top:24px;border:1px solid #d9dde4;overflow:hidden}#wallet-route-layer .wallet-order-row{display:grid;grid-template-columns:1.35fr .82fr .62fr .36fr;width:100%;min-height:72px;gap:12px;align-items:center;padding:12px 17px;border:0;border-bottom:1px solid #d9dde4;background:#fff;color:#24272d;text-align:left;font:inherit}#wallet-route-layer .wallet-order-row:last-child{border-bottom:0}#wallet-route-layer .wallet-order-row:not(.wallet-order-header){cursor:pointer}#wallet-route-layer .wallet-order-row:not(.wallet-order-header):hover{background:#f6f8ff}#wallet-route-layer .wallet-order-header{min-height:42px;color:#777d87;font-size:14px;font-weight:700}#wallet-route-layer .wallet-order-row span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#wallet-route-layer .wallet-order-row small{color:#687083;font-size:13px}#wallet-route-layer .wallet-order-row span:last-child{justify-self:end;font-weight:700}#wallet-route-layer .wallet-order-source{display:inline-flex;border-radius:999px;padding:4px 8px;font-size:12px;font-style:normal;font-weight:700;white-space:nowrap}#wallet-route-layer .wallet-order-source.is-bot{background:#fff3d7;color:#a56800}#wallet-route-layer .wallet-order-source.is-web{background:#e8f5ee;color:#22734a}
@media(max-width:560px){#wallet-route-layer .wallet-page{padding:18px 13px 44px}#wallet-route-layer .wallet-card{min-height:0;padding:27px 20px 25px;border-radius:11px}#wallet-route-layer h1{font-size:26px}#wallet-route-layer .wallet-card-head p{font-size:14px}#wallet-route-layer .wallet-orders-button{min-width:97px;padding:11px 10px;font-size:16px}#wallet-route-layer .wallet-balance{margin-top:35px}#wallet-route-layer .wallet-balance strong{font-size:39px}#wallet-route-layer h2{margin:34px 0 17px;font-size:24px}#wallet-route-layer .wallet-presets{gap:8px}#wallet-route-layer .wallet-presets button{min-height:43px;font-size:14px}#wallet-route-layer .wallet-custom-row{margin-top:30px;gap:8px;flex-wrap:wrap}#wallet-route-layer .wallet-confirm-amount{width:100%}#wallet-route-layer .wallet-order-filters{gap:6px;flex-wrap:wrap}#wallet-route-layer .wallet-order-filter{padding:7px 10px;font-size:13px}#wallet-route-layer .wallet-order-row{grid-template-columns:1.12fr .74fr .7fr .32fr;padding:11px 10px;gap:7px;font-size:12px}#wallet-route-layer .wallet-order-row small{font-size:11px}#wallet-route-layer .wallet-order-source{padding:3px 6px;font-size:11px}}

/* Embedded recharge panel: a sibling directly after the native wallet block. */
#wallet-native-orders-button{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:4px;min-height:30px;border:0;border-radius:7px;padding:6px 10px;background:#f8a921;color:#fff;font-size:13px;line-height:18px;font-weight:750;box-shadow:0 2px 5px rgba(146,97,12,.2);cursor:pointer}
#wallet-native-orders-button span{font-size:15px;line-height:1}
#wallet-native-orders-button:focus-visible{outline:3px solid rgba(248,169,33,.35);outline-offset:3px}
#wallet-recharge-panel{width:100%;margin:0 0 8px;padding:15px;background:#fff;border-top:1px solid #f0f1f4;border-bottom:1px solid #f0f1f4;color:#202126;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
#wallet-recharge-panel *{box-sizing:border-box}
#wallet-recharge-panel button:focus-visible{outline:3px solid rgba(78,110,225,.35);outline-offset:3px}
#wallet-recharge-panel .wallet-custom-amount:focus,#wallet-recharge-panel .wallet-custom-amount:focus-visible{outline:none!important;outline-offset:0;box-shadow:none!important}
#wallet-recharge-panel__head{display:flex;align-items:center;margin-bottom:14px}
#wallet-recharge-panel__head h2{margin:0;font-size:20px;line-height:1.2;font-weight:700}
#wallet-recharge-panel .wallet-recharge-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#wallet-recharge-panel .wallet-recharge-presets button{min-height:42px;border:0;border-radius:9px;background:linear-gradient(135deg,#536eea,#8157d3);color:#fff;font-size:15px;font-weight:740;box-shadow:0 3px 7px rgba(44,59,132,.25);cursor:pointer;transition:transform .12s ease,filter .12s ease}
#wallet-recharge-panel .wallet-recharge-presets button:active{transform:translateY(1px);filter:brightness(.94)}
#wallet-recharge-panel .wallet-recharge-label{display:block;margin-top:18px;color:#536eea;font-size:14px;font-weight:700}
#wallet-recharge-panel .wallet-custom-amount{display:block;width:100%;margin-top:7px;padding:10px 2px;border:0;border-bottom:2px solid #cbd0da;border-radius:0;outline:0;background:transparent;color:#202126;font-size:17px;line-height:1.3}
#wallet-recharge-panel .wallet-custom-amount::placeholder{color:#a5aab4}
#wallet-recharge-panel .wallet-custom-amount.is-invalid{border-bottom-color:#e5484d}
#wallet-recharge-panel .wallet-custom-error{min-height:20px;margin:6px 0 0;color:#e5484d;font-size:13px;line-height:20px}
#wallet-recharge-panel .wallet-custom-submit{display:block;min-height:40px;margin:12px 0 0 auto;padding:0 18px;border:0;border-radius:9px;background:linear-gradient(135deg,#536eea,#8157d3);box-shadow:0 3px 7px rgba(44,59,132,.25);color:#fff;font-size:15px;font-weight:740;cursor:pointer}
#wallet-recharge-panel .wallet-custom-submit:disabled{cursor:not-allowed;opacity:.48;box-shadow:none}
#wallet-recharge-panel .wallet-message{min-height:20px;margin:8px 0 0;color:#596174;font-size:13px;line-height:20px}
#wallet-recharge-panel .wallet-custom-error:empty,#wallet-recharge-panel .wallet-message:empty{min-height:0;margin:0}
#wallet-recharge-panel .wallet-message.is-error{color:#c53538}
@media(min-width:680px){#wallet-recharge-panel{max-width:760px;margin:0 auto 18px;padding:18px 22px;border:1px solid #edf0f4;border-radius:12px;box-shadow:0 7px 18px rgba(35,45,71,.06)}#wallet-recharge-panel .wallet-recharge-presets{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:560px){#wallet-recharge-panel .wallet-custom-submit{width:100%;margin-top:12px}}

/* Desktop and tablet AlipayF2F result: render the local QR rather than navigating Safari to the QR URL. */
#wallet-route-layer .wallet-qr-payment{margin-top:28px;padding:24px;border:1px solid #dce5fb;border-radius:12px;background:#f8faff;text-align:center}
#wallet-route-layer .wallet-qr-payment h2{margin:0;color:#202126;font-size:20px;font-weight:720}
#wallet-route-layer .wallet-qr-payment p{margin:9px 0 18px;color:#687080;font-size:14px;line-height:1.55}
#wallet-route-layer .wallet-qr-payment__image{display:block;width:232px;height:232px;margin:0 auto;padding:10px;border:1px solid #e2e5ea;background:#fff;image-rendering:pixelated}
#wallet-route-layer .wallet-close-payment-button{display:block;margin:18px auto 0;padding:9px 18px;border:1px solid #f3a0a0;border-radius:999px;background:linear-gradient(135deg,#ee4d4f,#d9363e);box-shadow:0 6px 14px rgba(206,45,52,.22);color:#fff;font-size:14px;font-weight:700;line-height:1.25;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease}
#wallet-route-layer .wallet-close-payment-button:hover,#wallet-route-layer .wallet-close-payment-button:focus-visible{box-shadow:0 8px 18px rgba(206,45,52,.3);transform:translateY(-1px)}
#wallet-route-layer .wallet-close-payment-button:disabled{cursor:wait;opacity:.65;transform:none}
@media(max-width:560px){#wallet-route-layer .wallet-qr-payment{padding:20px 14px}#wallet-route-layer .wallet-qr-payment__image{width:210px;height:210px}#wallet-route-layer .wallet-close-payment-button{margin-top:16px;padding:8px 16px;font-size:13px}}

/* Phone-only Alipay handoff confirmation; it is created only by the wallet route layer. */
#wallet-route-layer .wallet-alipay-confirm{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(19,27,43,.48)}
#wallet-route-layer .wallet-alipay-confirm__dialog{width:min(100%,380px);padding:26px 24px 22px;border:1px solid rgba(255,255,255,.72);border-radius:18px;background:linear-gradient(145deg,#fff,#f8faff);box-shadow:0 20px 48px rgba(10,25,58,.3);color:#202126;text-align:left}
#wallet-route-layer .wallet-alipay-confirm__dialog h2{margin:0;font-size:22px;line-height:1.35;font-weight:760}
#wallet-route-layer .wallet-alipay-confirm__dialog p{margin:11px 0 0;color:#687080;font-size:14px;line-height:1.65}
#wallet-route-layer .wallet-alipay-confirm__actions{display:flex;gap:10px;justify-content:flex-end;margin-top:23px}
#wallet-route-layer .wallet-alipay-confirm__actions button{min-height:42px;border-radius:10px;padding:0 16px;font-size:15px;font-weight:700;cursor:pointer}
#wallet-route-layer .wallet-alipay-confirm__cancel{border:1px solid #d9dee8;background:#fff;color:#596174}
#wallet-route-layer .wallet-alipay-confirm__open{border:1px solid #1677d9;background:linear-gradient(135deg,#2b9af3,#1677d9);box-shadow:0 5px 12px rgba(22,119,217,.24);color:#fff}
#wallet-route-layer .wallet-alipay-confirm__actions button:focus-visible{outline:3px solid rgba(43,154,243,.35);outline-offset:3px}
#wallet-route-layer .wallet-alipay-confirm__open:disabled{cursor:wait;opacity:.65}
@media(max-width:560px){#wallet-route-layer .wallet-alipay-confirm{position:fixed;padding:18px}#wallet-route-layer .wallet-alipay-confirm__dialog{padding:23px 20px 19px;border-radius:16px}#wallet-route-layer .wallet-alipay-confirm__dialog h2{font-size:21px}#wallet-route-layer .wallet-alipay-confirm__actions{display:grid;grid-template-columns:1fr 1.3fr}#wallet-route-layer .wallet-alipay-confirm__actions button{width:100%;padding:0 10px}}


/* Dashboard traffic progress: remaining-capacity mode with hard visual boundaries. */
:root {
  --progress-start-color: #16c7e8;
  --progress-mid-color: #3997f5;
  --progress-end-color: #7c5cff;
  --progress-track-color: #eef2f9;
  --progress-track-border-color: rgba(53, 89, 161, 0.08);
  --progress-shadow-color: rgba(57, 151, 245, 0.45);
  --progress-height: 16px;
  --progress-radius: 999px;
}

html[data-theme="dark"],
body[data-theme="dark"] {
  --progress-track-color: #1f293b;
  --progress-track-border-color: rgba(255, 255, 255, 0.09);
}

@media (prefers-color-scheme: dark) {
  :root {
    --progress-track-color: #1f293b;
    --progress-track-border-color: rgba(255, 255, 255, 0.09);
  }
}

/* Track is the consumed/empty capacity. Overflow is physically clipped here. */
.custom-traffic-progress,
.v2b-traffic-progress {
  width: 100%;
  height: var(--progress-height) !important;
  margin: 0 0 6px;
  overflow: hidden !important;
  border: 1px solid var(--progress-track-border-color);
  border-radius: var(--progress-radius);
  background: var(--progress-track-color) !important;
}

/* Fill is remaining capacity. JS supplies a clamped 0..100 visual percent. */
.custom-traffic-progress > .progress-bar,
.custom-traffic-progress > [class*="progress-bar"],
.v2b-traffic-progress > .v2b-traffic-progress__fill {
  min-width: 0;
  max-width: 100% !important;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #16c7e8 0%, #3997f5 50%, #7c5cff 100%) !important;
  box-shadow: 0 0 10px 2px rgba(57, 151, 245, 0.45);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: width;
}

@media (prefers-reduced-motion: reduce) {
  .custom-traffic-progress > .progress-bar,
  .custom-traffic-progress > [class*="progress-bar"],
  .v2b-traffic-progress > .v2b-traffic-progress__fill {
    transition: none;
  }
}

/* Auto-renew failure dialog: isolated overlay, does not alter Umi/React root styles. */
.auto-renew-failure-dialog{position:fixed;inset:0;z-index:12000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(18,27,43,.52);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
.auto-renew-failure-dialog__card{width:min(100%,420px);padding:26px 24px 22px;border-radius:16px;background:#fff;box-shadow:0 20px 48px rgba(10,25,58,.30);color:#202126}
.auto-renew-failure-dialog__card h2{margin:0;font-size:21px;line-height:1.35;font-weight:760}.auto-renew-failure-dialog__card p{margin:12px 0;color:#596174;font-size:15px;line-height:1.7;word-break:break-word}
.auto-renew-failure-dialog__links{display:grid;gap:9px;margin:18px 0}.auto-renew-failure-dialog__links a{display:block;border:1px solid #dce5fb;border-radius:10px;padding:11px 12px;background:#f8faff;color:#2878d4;font-size:14px;font-weight:700;text-decoration:none}.auto-renew-failure-dialog__links a:focus-visible{outline:3px solid rgba(43,154,243,.35);outline-offset:2px}
.auto-renew-failure-dialog__card button{display:block;min-width:96px;height:40px;margin:20px 0 0 auto;border:1px solid #1677d9;border-radius:9px;background:#1677d9;color:#fff;font-size:15px;font-weight:700;cursor:pointer}
@media(max-width:560px){.auto-renew-failure-dialog{padding:18px}.auto-renew-failure-dialog__card{padding:23px 20px 19px}.auto-renew-failure-dialog__card button{width:100%;margin-top:18px}}

/* Device management: use this route's own scroll container on phones.
   The native fixed header remains untouched; only the tall device/security list scrolls. */
@media (max-width: 767.98px) {
  #main-container.v2b-subscription-devices-page {
    height: 100dvh;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  #main-container.v2b-subscription-devices-page > .content {
    min-height: calc(100dvh - 3.25rem);
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)) !important;
  }
}
