/* Created by Yanjunhui */
    .qa-upsell-balance-list {
      display: grid;
      gap: 6px;
      margin-bottom: 8px;
    }
    .qa-upsell-balance-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      font-size: 12px;
      color: #2d3138;
      background: #f7f7fa;
      border: 1px solid #ececf0;
      border-radius: 8px;
      padding: 8px 10px;
    }
    .qa-upsell-balance-value {
      font-weight: 700;
      color: #111;
    }
    .qa-upsell-choice-title {
      font-size: 12px;
      color: #7a7f89;
      margin-bottom: 6px;
    }
    .qa-upsell-choice-list {
      display: grid;
      gap: 8px;
      margin-bottom: 8px;
    }
    .qa-upsell-choice-item {
      display: flex;
      align-items: center;
      gap: 10px;
      border: 1px solid #d9dce4;
      border-radius: 10px;
      background: #fafbfe;
      padding: 10px 12px;
      cursor: pointer;
      transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
    }
    .qa-upsell-choice-item.active {
      border-color: rgba(74, 144, 226, 0.72);
      background: rgba(74, 144, 226, 0.08);
      box-shadow: inset 0 0 0 1px rgba(74, 144, 226, 0.12);
    }
    .qa-upsell-choice-item input {
      margin: 0;
      flex: 0 0 auto;
    }
    .qa-upsell-choice-copy {
      flex: 1 1 auto;
      min-width: 0;
    }
    .qa-upsell-choice-label {
      font-size: 13px;
      font-weight: 700;
      color: #1c2128;
    }
    .qa-upsell-choice-value {
      margin-top: 2px;
      font-size: 12px;
      color: #6d7380;
    }
    .qa-upsell-choice-tag {
      flex: 0 0 auto;
      font-size: 11px;
      font-weight: 700;
      color: #2467b3;
      background: rgba(74, 144, 226, 0.14);
      border-radius: 999px;
      padding: 4px 8px;
    }
    .qa-upsell-state {
      border-radius: 8px;
      padding: 8px 10px;
      font-size: 12px;
      line-height: 1.5;
      margin-bottom: 8px;
    }
    .qa-upsell-state.info {
      color: #24456d;
      background: rgba(74, 144, 226, 0.10);
      border: 1px solid rgba(74, 144, 226, 0.18);
    }
    .qa-upsell-state.warn {
      color: #8a5a00;
      background: rgba(240, 201, 58, 0.16);
      border: 1px solid rgba(180, 134, 0, 0.18);
    }
    .qa-upsell-state.error {
      color: #8f2f2f;
      background: rgba(204, 47, 47, 0.08);
      border: 1px solid rgba(204, 47, 47, 0.14);
    }
    .qa-upsell-state.success {
      color: #245f3e;
      background: rgba(80, 172, 112, 0.10);
      border: 1px solid rgba(80, 172, 112, 0.18);
    }
    .qa-upsell-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .qa-upsell-btn {
      margin: 0;
      border: none;
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      color: #fff;
      background: #111;
    }
    .qa-upsell-btn.secondary {
      background: #4a90e2;
    }
    .qa-billing-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(17, 17, 17, 0.38);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 18px;
      z-index: 70;
    }
    .qa-billing-modal-enter-active,
    .qa-billing-modal-leave-active {
      transition: opacity 0.22s ease;
    }
    .qa-billing-modal-enter-active .qa-billing-modal-card,
    .qa-billing-modal-leave-active .qa-billing-modal-card {
      transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
      will-change: transform, opacity;
    }
    .qa-billing-modal-enter,
    .qa-billing-modal-leave-to {
      opacity: 0;
    }
    .qa-billing-modal-enter .qa-billing-modal-card,
    .qa-billing-modal-leave-to .qa-billing-modal-card {
      opacity: 0;
      transform: translateY(18px) scale(0.965);
    }
    .qa-billing-modal-card {
      position: relative;
      width: min(100%, 460px);
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 26px 80px rgba(24, 27, 33, 0.22);
      padding: 30px 30px 30px;
    }
    .global-topup-preview-card {
      width: min(100%, 520px);
      background:
        radial-gradient(circle at top right, rgba(245, 213, 74, 0.22), transparent 34%),
        linear-gradient(180deg, #fffdf5 0%, #ffffff 42%);
      border: 1px solid rgba(220, 199, 129, 0.34);
    }
    .global-topup-preview-close {
      top: 22px;
      right: 22px;
      width: 40px;
      height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(235, 238, 245, 0.96);
      box-shadow: inset 0 0 0 1px rgba(26, 30, 36, 0.04);
    }
    .global-topup-preview-close:hover {
      background: #eef1f6;
    }
    .global-topup-preview-close-icon {
      position: relative;
      width: 18px;
      height: 18px;
      display: block;
    }
    .global-topup-preview-close-icon::before,
    .global-topup-preview-close-icon::after {
      content: "";
      position: absolute;
      top: 8px;
      left: 0;
      width: 18px;
      height: 3px;
      border-radius: 999px;
      background: #505763;
      transform-origin: center;
    }
    .global-topup-preview-close-icon::before {
      transform: rotate(45deg);
    }
    .global-topup-preview-close-icon::after {
      transform: rotate(-45deg);
    }
    .global-topup-preview-eyebrow {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      border-radius: 999px;
      padding: 0 12px;
      background: rgba(17, 17, 17, 0.06);
      color: #6f6550;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .global-topup-preview-title {
      margin-top: 14px;
    }
    .global-topup-preview-subtitle {
      max-width: 420px;
    }
    .global-topup-preview-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 14px;
    }
    .global-topup-preview-legend-item {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      border-radius: 999px;
      padding: 0 10px;
      background: rgba(24, 29, 36, 0.06);
      color: #66707d;
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
    }
    .global-topup-preview-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-top: 20px;
    }
    .global-topup-preview-item {
      border: 1px solid rgba(26, 30, 36, 0.08);
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 247, 238, 0.96) 100%);
      padding: 18px 18px 16px;
      box-shadow: 0 14px 36px rgba(29, 33, 41, 0.08);
    }
    .global-topup-preview-main {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }
    .global-topup-preview-amount {
      font-size: 20px;
      line-height: 1.2;
      font-weight: 800;
      color: #191d24;
      letter-spacing: -0.02em;
    }
    .global-topup-preview-badge {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      border-radius: 999px;
      padding: 0 10px;
      background: #fdd401;
      color: #302500;
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
    }
    .global-topup-preview-prices {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      margin-top: 14px;
      color: #414753;
    }
    .global-topup-preview-price-cny {
      font-size: 13px;
      color: #7b818c;
      letter-spacing: 0.02em;
    }
    .global-topup-preview-price-usd {
      font-size: 30px;
      line-height: 1;
      font-weight: 800;
      color: #191d24;
      letter-spacing: -0.02em;
    }
    .global-topup-preview-note {
      margin-top: 6px;
      font-size: 13px;
      line-height: 1.5;
      color: #8a6d1f;
    }
    .global-topup-preview-meta {
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 14px;
    }
    .global-topup-preview-chip {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      border-radius: 999px;
      padding: 0 10px;
      background: rgba(253, 212, 1, 0.16);
      color: #6c5711;
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
    }
    .global-topup-preview-meta .global-topup-preview-chip-muted {
      flex-basis: 100%;
      width: fit-content;
    }
    .global-topup-preview-chip-muted {
      background: rgba(24, 29, 36, 0.06);
      color: #66707d;
    }
    .global-topup-preview-footer {
      margin-top: 20px;
    }
    @media (max-width: 720px) {
      .global-topup-preview-card {
        width: min(100%, 100%);
        padding: 26px 22px 22px;
      }
      .global-topup-preview-list {
        grid-template-columns: 1fr;
        gap: 12px;
      }
      .global-topup-preview-price-usd {
        font-size: 28px;
      }
    }
    .qa-billing-modal-close {
      position: absolute;
      top: 18px;
      right: 18px;
      width: 34px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: none;
      border-radius: 999px;
      background: transparent;
      color: #858b96;
      font-size: 24px;
      line-height: 1;
      cursor: pointer;
    }
    .qa-billing-modal-close:hover {
      color: #2d3138;
      background: #f2f4f7;
    }
    .qa-billing-modal-title {
      margin: 0;
      padding-right: 48px;
      font-size: 22px;
      line-height: 1.45;
      font-weight: 700;
      color: #191d24;
    }
    .qa-billing-modal-subtitle {
      margin: 10px 0 0;
      font-size: 14px;
      line-height: 1.6;
      color: #6a707b;
    }
    .qa-billing-modal-status-slot {
      min-height: 44px;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
    }
    .qa-billing-modal-status-slot.is-empty {
      min-height: 12px;
    }
    .qa-billing-modal-status-slot .qa-upsell-meta,
    .qa-billing-modal-status-slot .qa-upsell-state {
      width: 100%;
    }
    .qa-billing-modal-choice-title {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 18px 0 10px;
      font-size: 16px;
      font-weight: 700;
      color: #343944;
    }
    .qa-billing-modal-choice-icon {
      display: block;
      width: 24px;
      height: 24px;
      flex: 0 0 auto;
      object-fit: contain;
    }
    .qa-billing-modal-choice-list {
      display: grid;
      gap: 10px;
    }
    .qa-billing-modal-choice-item {
      display: flex;
      align-items: center;
      gap: 12px;
      border: 1px solid #d9dde7;
      border-radius: 14px;
      background: #fbfcfe;
      padding: 14px 14px;
      transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
    }
    .qa-billing-modal-choice-item.selectable {
      cursor: pointer;
    }
    .qa-billing-modal-choice-item.active {
      border-color: #FDD401;
      background: rgb(255 247 193 / 47%);
      box-shadow: inset 0 0 0 1px rgba(253, 212, 1, 0.18);
    }
    .qa-billing-modal-choice-item.disabled {
      opacity: 0.58;
    }
    .qa-billing-modal-choice-item input {
      margin: 0;
      flex: 0 0 auto;
      accent-color: rgb(255 243 35);
    }
    .qa-billing-modal-choice-copy {
      flex: 1 1 auto;
      min-width: 0;
    }
    .qa-billing-modal-choice-label {
      font-size: 16px;
      font-weight: 700;
      color: #1c2128;
    }
    .qa-billing-modal-choice-value {
      margin-top: 4px;
      font-size: 14px;
      line-height: 1.5;
      color: #6d7380;
    }
    .qa-billing-modal-choice-tag {
      flex: 0 0 auto;
      font-size: 11px;
      font-weight: 700;
      color: #333333;
      background: rgb(255 243 35);
      border-radius: 999px;
      padding: 4px 8px;
    }
    .qa-billing-modal-footer {
      margin-top: 16px;
    }
    .qa-billing-modal-primary {
      width: 100%;
      min-height: 48px;
      border: none;
      border-radius: 12px;
      background: #111;
      color: #fff;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
    }
    .qa-billing-modal-primary[disabled] {
      opacity: 0.5;
      cursor: not-allowed;
    }
    .qa-billing-modal-card .qa-billing-modal-detail {
      margin: 10px 0 10px;
      font-size: 11px;
      color: #c1c1c1;
      line-height: 1.5;
    }
    .account-settings-card {
      max-width: 520px;
    }
    .account-settings-header-row {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
    }
    .account-settings-back-link {
      border: none;
      background: transparent;
      color: #8a6d1f;
      font-size: 13px;
      font-weight: 700;
      padding: 0;
      cursor: pointer;
    }
    .account-settings-section {
      margin-top: 10px;
    }
    .account-settings-section-title {
      font-size: 13px;
      font-weight: 700;
      color: #2f3137;
      margin-bottom: 10px;
    }
    .account-settings-info-card {
      border: 1px solid rgba(253, 212, 1, 0.2);
      background: linear-gradient(180deg, rgba(255, 251, 235, 0.96), rgba(255, 247, 219, 0.92));
      border-radius: 14px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .account-settings-info-title {
      font-size: 16px;
      font-weight: 700;
      color: #2f3137;
      margin-bottom: 6px;
    }
    .account-settings-info-text {
      margin: 0;
      font-size: 13px;
      line-height: 1.65;
      color: #65583a;
    }
    .account-settings-primary-btn {
      align-self: flex-start;
      border: none;
      border-radius: 10px;
      background: #111;
      color: #fff;
      padding: 10px 16px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
    }
    .account-settings-primary-btn:hover {
      background: #2a2a2a;
    }
    .account-settings-link-row {
      width: 100%;
      border: 1px solid #ececf0;
      background: #fff;
      border-radius: 14px;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 15px;
      font-weight: 700;
      color: #2f3137;
      cursor: pointer;
    }
    .account-settings-link-arrow {
      color: #8f96a3;
      font-size: 20px;
      line-height: 1;
    }
    .account-settings-danger-card {
      border: 1px solid rgba(214, 71, 71, 0.18);
      background: #fff7f7;
      border-radius: 14px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .account-settings-danger-title {
      font-size: 16px;
      font-weight: 700;
      color: #a62e2e;
      margin-bottom: 6px;
    }
    .account-settings-danger-text {
      margin: 0;
      font-size: 13px;
      line-height: 1.65;
      color: #5f4141;
    }
    .account-settings-danger-btn {
      align-self: flex-start;
      border: none;
      border-radius: 10px;
      background: #a62e2e;
      color: #fff;
      padding: 10px 16px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
    }
    .account-settings-danger-btn:hover {
      background: #8f2323;
    }
    .account-settings-danger-btn[disabled] {
      cursor: not-allowed;
      opacity: 0.6;
    }
    .qa-block {
      background: #fff;
      border: 1px solid #ececf0;
      border-radius: 8px;
      padding: 10px;
      margin-bottom: 8px;
    }
    .qa-label {
      display: inline-block;
      font-size: 12px;
      color: #666;
      margin-bottom: 4px;
    }
    .qa-question-head {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 4px;
    }
    .qa-question-head .qa-label {
      margin-bottom: 0;
    }
    .qa-question-display {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .qa-text {
      font-size: 17px;
      line-height: 1.45;
      letter-spacing: 0.06em;
      color: #222;
      white-space: pre-line;
    }
    .qa-answer-text {
      padding-top: 1.45em;
      padding-bottom: 1.45em;
      font-weight: 700;
    }
    .qa-question-text {
      font-weight: 700;
    }
    .qa-typed-char {
      display: inline;
      animation: qaTypedCharFade 30ms ease-out forwards;
      will-change: color, filter, opacity;
    }
    @keyframes qaTypedCharFade {
      0% {
        opacity: 0.78;
        filter: saturate(1.28) brightness(1.04);
      }
      68% {
        opacity: 1;
      }
      100% {
        color: #222;
        opacity: 1;
        filter: none;
      }
    }
    .qa-report-note {
      margin-top: 10px;
      margin-bottom: 12px;
      font-size: 12px;
      line-height: 1.65;
      color: #b4b4bc;
      letter-spacing: 0.02em;
    }
    .qa-report-feedback-link {
      margin: 0 0 0 6px;
      padding: 0;
      display: inline;
      vertical-align: baseline;
      line-height: inherit;
      width: auto;
      min-width: 0;
      min-height: 0;
      height: auto;
      border: none;
      background: none;
      font: inherit;
      color: #7c7c88;
      text-decoration: underline;
      text-underline-offset: 2px;
      cursor: pointer;
      transition: color 0.16s ease;
    }
    .qa-report-feedback-link:hover {
      color: #555560;
    }
    .qa-cursor {
      display: inline-block;
      width: 1px;
      height: 1em;
      vertical-align: -2px;
      background: #333;
      margin-left: 3px;
      animation: qaBlink 0.9s steps(1, end) infinite;
    }
    @keyframes qaSubmitBreath {
      0% {
        transform: translateY(3px);
        box-shadow:
          inset 0 5px 10px rgba(128, 83, 0, 0.24),
          inset 0 -4px 8px rgba(255, 243, 176, 0.22),
          inset 0 0 0 1px rgba(120, 82, 0, 0.12),
          0 1px 2px rgba(114, 83, 0, 0.08);
      }
      50% {
        transform: translateY(4px);
        box-shadow:
          inset 0 6px 12px rgba(128, 83, 0, 0.28),
          inset 0 -3px 6px rgba(255, 243, 176, 0.18),
          inset 0 0 0 1px rgba(120, 82, 0, 0.14),
          0 1px 1px rgba(114, 83, 0, 0.06);
      }
      100% {
        transform: translateY(3px);
        box-shadow:
          inset 0 5px 10px rgba(128, 83, 0, 0.24),
          inset 0 -4px 8px rgba(255, 243, 176, 0.22),
          inset 0 0 0 1px rgba(120, 82, 0, 0.12),
          0 1px 2px rgba(114, 83, 0, 0.08);
      }
    }
    @keyframes qaSubmitScan {
      0% { transform: translateX(-150%); }
      100% { transform: translateX(150%); }
    }
    @keyframes qaSubmitScanLines {
      0% { background-position: 0 0; }
      100% { background-position: 0 12px; }
    }
    @keyframes qaBlink {
      0%, 45% { opacity: 1; }
      46%, 100% { opacity: 0; }
    }
    .result-text {
      line-height: 1.5;
      font-size: 13px;
      letter-spacing: 0.06em;
      color: #6f6f75;
      padding-left: 22px;
    }
    .button-row {
      margin-top: 22px;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .button-row button { background: #4A90E2; }
    .button-row .back { background: #666; }
    .back { background: #666; }
    .danger-link-wrap {
      margin-top: 14px;
      text-align: center;
    }
    .danger-link {
      font-size: 13px;
      color: #8f8f96;
      text-decoration: underline;
      cursor: pointer;
      background: none;
      border: none;
      padding: 0;
      margin: 0;
    }
    .danger-link:hover { color: #77777f; }

    .loading {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 255, 255, 0.85);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 99;
      font-size: 18px;
      font-weight: bold;
    }
    .loading.with-sidebar {
      left: 280px;
    }
    .error {
      color: #cc2f2f;
      font-weight: bold;
      margin: 8px 0;
      text-align: center;
    }
    .dialog-overlay {
      position: fixed;
      inset: 0;
      background: rgba(18, 20, 24, 0.42);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 120;
      padding: 20px;
    }
    .image-lightbox {
      position: fixed;
      inset: 0;
      background: rgba(12, 13, 16, 0.72);
      z-index: 130;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      cursor: zoom-out;
    }
    .image-lightbox img {
      max-width: min(96vw, 1400px);
      max-height: 92vh;
      width: auto;
      height: auto;
      border-radius: 10px;
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
      background: #fff;
    }
    .dialog-card {
      width: 100%;
      max-width: 420px;
      background: #fff;
      border-radius: 14px;
      box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
      padding: 16px;
    }
    .dialog-title {
      font-size: 18px;
      font-weight: 700;
      color: #2a2b2f;
      margin: 2px 0 10px;
    }
    .dialog-message {
      font-size: 14px;
      line-height: 1.55;
      color: #555861;
      white-space: pre-line;
      margin-bottom: 14px;
    }
    .dialog-card-guide .dialog-message {
      margin-bottom: 18px;
      text-align: center;
    }
    .dialog-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }
    .dialog-actions-centered {
      justify-content: center;
    }
    .dialog-btn {
      margin: 0;
      border: none;
      border-radius: 9px;
      padding: 8px 14px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      color: #fff;
      background: #111;
    }
    .dialog-btn.secondary {
      background: #81848f;
    }
    .dialog-link {
      display: block;
      margin-top: 14px;
      font-size: 11.2px;
      line-height: 1.5;
      color: #111111;
      text-align: center;
      text-decoration: none;
    }
    .dialog-link:hover {
      text-decoration: underline;
    }
    .usage-inline-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .usage-inline-link {
      margin: 0;
      border: none;
      background: transparent;
      color: #ff6b3b;
      font-size: 12px;
      line-height: 1.4;
      font-weight: 700;
      cursor: pointer;
      padding: 0;
      white-space: nowrap;
      flex: 0 0 auto;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .usage-inline-link:hover {
      color: #e4572e;
    }
    .usage-inline-link-muted {
      color: #7a7a7a;
    }
    .usage-inline-link-muted:hover {
      color: #5f5f5f;
    }

    .login-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(18, 20, 24, 0.42);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 150;
      padding: 20px;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }
    .login-modal-card {
      width: 100%;
      max-width: 440px;
      background: #fff;
      border-radius: 14px;
      box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
      padding: 24px;
      max-height: calc(100dvh - 40px);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }