:root {
  --popup-orange: #f97316;
  --popup-orange-deep: #e85b0b;
  --popup-ink: #171a20;
  --popup-muted: #747d88;
  --popup-line: #e7eaee;
}

/* Shared premium notification card. Existing JS still controls content and timing. */
.toast {
  width: min(calc(100% - 32px), 352px) !important;
  min-height: 174px !important;
  max-height: min(72dvh, 430px);
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  bottom: auto !important;
  z-index: 10000 !important;
  overflow-y: auto;
  padding: 78px 22px 23px !important;
  border: 1px solid rgba(255, 255, 255, 0.86) !important;
  border-radius: 20px !important;
  color: var(--popup-ink) !important;
  background:
    linear-gradient(180deg, rgba(255, 246, 238, 0.98) 0 64px, rgba(255, 255, 255, 0.98) 64px 100%) !important;
  box-shadow: 0 28px 80px rgba(24, 29, 36, 0.28), 0 0 0 100vmax rgba(18, 22, 28, 0.48) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  white-space: pre-line;
  opacity: 0 !important;
  pointer-events: none;
  transform: translate(-50%, -46%) scale(0.9) !important;
  transition: opacity 240ms ease, transform 280ms cubic-bezier(.2,.82,.25,1) !important;
}

.toast::before {
  content: "";
  width: 48px;
  height: 48px;
  position: absolute;
  left: 50%;
  top: 16px;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: linear-gradient(145deg, #60a5fa, #2563eb);
  box-shadow: 0 0 0 8px rgba(37, 99, 235, 0.09), 0 12px 24px rgba(37, 99, 235, 0.2), inset 0 2px rgba(255, 255, 255, 0.36);
  transform: translateX(-50%);
}

.toast::after {
  content: "i";
  position: absolute;
  left: 50%;
  top: 25px;
  color: #ffffff;
  font-size: 23px;
  font-weight: 950;
  font-style: normal;
  line-height: 1;
  transform: translateX(-50%);
}

.toast.success {
  background: linear-gradient(180deg, rgba(237, 250, 243, 0.98) 0 64px, rgba(255, 255, 255, 0.98) 64px 100%) !important;
}

.toast.success::before {
  background: linear-gradient(145deg, #35c47c, #128454);
  box-shadow: 0 0 0 8px rgba(18, 132, 84, 0.09), 0 12px 24px rgba(18, 132, 84, 0.2), inset 0 2px rgba(255, 255, 255, 0.36);
}

.toast.success::after {
  content: "\2713";
  top: 27px;
  font-size: 22px;
}

.toast.error {
  background: linear-gradient(180deg, rgba(255, 241, 240, 0.98) 0 64px, rgba(255, 255, 255, 0.98) 64px 100%) !important;
}

.toast.error::before {
  background: linear-gradient(145deg, #ff756d, #d92d20);
  box-shadow: 0 0 0 8px rgba(217, 45, 32, 0.09), 0 12px 24px rgba(217, 45, 32, 0.2), inset 0 2px rgba(255, 255, 255, 0.3);
}

.toast.error::after {
  content: "\00D7";
  top: 23px;
  font-size: 31px;
  font-weight: 700;
}

.toast.warning {
  background: linear-gradient(180deg, rgba(255, 248, 231, 0.98) 0 64px, rgba(255, 255, 255, 0.98) 64px 100%) !important;
}

.toast.warning::before {
  background: linear-gradient(145deg, #ffb84d, #ef7f13);
  box-shadow: 0 0 0 8px rgba(239, 127, 19, 0.1), 0 12px 24px rgba(239, 127, 19, 0.2);
}

.toast.warning::after {
  content: "!";
}

.toast.show {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
  animation: popupPremiumIn 300ms cubic-bezier(.2,.82,.25,1.08) both;
}

.toast.success.show::before {
  animation: popupSuccessBounce 320ms 80ms cubic-bezier(.2,.85,.25,1.16) both;
}

.toast.error.show::before {
  animation: popupToastErrorShake 300ms 70ms ease both;
}

.admin-toast {
  width: min(calc(100% - 32px), 360px) !important;
  min-height: 62px;
  top: 20px !important;
  left: 50% !important;
  z-index: 10000 !important;
  padding: 17px 18px 17px 54px !important;
  border: 1px solid #d6eddf !important;
  border-radius: 18px !important;
  color: #175c3b !important;
  background: rgba(248, 255, 251, 0.97) !important;
  box-shadow: 0 20px 48px rgba(25, 55, 42, 0.18) !important;
  backdrop-filter: blur(18px);
  transform: translateX(-50%) !important;
  animation: popupSlideDown 280ms ease both;
}

.admin-toast::before {
  content: "\2713";
  width: 30px;
  height: 30px;
  position: absolute;
  left: 14px;
  top: 15px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: #168454;
  font-weight: 900;
}

.admin-toast.error {
  border-color: #f5d0cd !important;
  color: #9f2f28 !important;
  background: rgba(255, 249, 248, 0.98) !important;
}

.admin-toast.error::before {
  content: "\00D7";
  background: #d92d20;
  font-size: 22px;
}

/* Consistent blurred backdrops for modal and sheet systems. */
.profile-modal,
.avatar-modal,
.home-service-modal,
.team-qr-modal,
.managed-popup,
.admin-user-modal,
.modal-backdrop,
.purchase-account-sheet,
.match-overlay,
.tool-sheet,
.withdraw-account-settings-sheet,
.delete-tool-modal,
.withdraw-process-overlay,
.limit-popup,
.signup-bonus-modal,
.register-loading {
  background-color: rgba(18, 22, 28, 0.52) !important;
  backdrop-filter: blur(12px) saturate(1.06) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.06) !important;
}

.profile-modal-backdrop,
.home-service-backdrop,
.team-qr-backdrop {
  background: rgba(18, 22, 28, 0.52) !important;
  backdrop-filter: blur(12px) saturate(1.06) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.06) !important;
  animation: popupPremiumFade 240ms ease both !important;
}

/* White glass surfaces shared by every existing dialog family. */
.profile-modal-sheet,
.avatar-modal-sheet,
.home-service-sheet,
.team-qr-sheet,
.managed-popup-card,
.admin-user-modal-card,
.payment-modal,
.purchase-account-sheet-panel,
.match-card,
.tool-sheet-panel,
.withdraw-account-settings-panel,
.delete-tool-card,
.withdraw-process-card,
.limit-box,
.register-loading-card {
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  background-color: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 28px 80px rgba(20, 25, 32, 0.27), 0 12px 30px rgba(232, 91, 11, 0.08) !important;
}

.profile-modal-sheet,
.home-service-sheet,
.team-qr-sheet,
.purchase-account-sheet-panel,
.tool-sheet-panel,
.withdraw-account-settings-panel {
  border-radius: 24px 24px 0 0 !important;
  animation: popupPremiumSheet 300ms cubic-bezier(.2,.82,.25,1) both !important;
}

.profile-modal-sheet {
  max-height: min(88dvh, 720px) !important;
  padding: 21px 18px calc(26px + env(safe-area-inset-bottom)) !important;
  background:
    linear-gradient(180deg, #fff8f2 0 76px, rgba(255, 255, 255, 0.98) 76px 100%) !important;
}

.profile-modal-head,
.home-service-head,
.team-qr-head {
  min-height: 44px;
  margin-bottom: 16px !important;
}

.profile-modal-head h2,
.home-service-head h2,
.team-qr-head h2 {
  color: var(--popup-ink) !important;
  font-size: 20px !important;
  font-weight: 900 !important;
}

.profile-modal-close,
.home-service-head .icon-btn,
.team-qr-head button,
.avatar-modal-sheet header button {
  width: 40px !important;
  height: 40px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(249, 115, 22, 0.14) !important;
  border-radius: 13px !important;
  color: var(--popup-orange-deep) !important;
  background: rgba(255, 255, 255, 0.84) !important;
  box-shadow: 0 8px 18px rgba(31, 36, 43, 0.07) !important;
  transition: transform 220ms ease, background 220ms ease !important;
}

.profile-modal-close:active,
.home-service-head .icon-btn:active,
.team-qr-head button:active,
.avatar-modal-sheet header button:active {
  transform: scale(0.92);
}

.profile-modal-panel .field,
.profile-modal-panel.form {
  gap: 12px;
}

.profile-modal-panel .field span {
  color: #4e5660;
  font-size: 11px;
  font-weight: 850;
}

.profile-modal-panel .input {
  min-height: 52px;
  border: 1px solid #e1e5e9;
  border-radius: 14px;
  color: var(--popup-ink);
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(31, 36, 43, 0.045);
}

.profile-modal-panel .input:focus {
  border-color: rgba(249, 115, 22, 0.68);
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.1), 0 9px 22px rgba(31, 36, 43, 0.05);
}

.profile-service-option,
.profile-language-option,
.profile-activity-item,
.home-service-option,
.purchase-account-option {
  border-color: var(--popup-line) !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 24px rgba(30, 35, 42, 0.06) !important;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease !important;
}

.profile-service-option:active,
.profile-language-option:active,
.home-service-option:active,
.purchase-account-option:active {
  transform: scale(0.98);
  border-color: rgba(249, 115, 22, 0.28) !important;
}

.avatar-modal-sheet {
  width: min(calc(100% - 28px), 480px) !important;
  max-height: min(90dvh, 720px) !important;
  overflow: hidden auto !important;
  border-radius: 22px !important;
  background: #f7f8fa !important;
  animation: popupPremiumIn 300ms cubic-bezier(.2,.82,.25,1.05) both;
}

.avatar-modal-sheet > header {
  padding: 14px !important;
  border-bottom: 1px solid #e8ebef !important;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(14px);
}

.avatar-choice {
  border-radius: 15px !important;
  background: #eef1f4 !important;
  box-shadow: 0 8px 18px rgba(30, 35, 42, 0.07);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.avatar-choice:active {
  transform: scale(0.96);
}

.avatar-choice.selected {
  border-color: var(--popup-orange) !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12), 0 10px 22px rgba(232, 91, 11, 0.12) !important;
}

.avatar-check {
  background: linear-gradient(145deg, #fb923c, var(--popup-orange-deep)) !important;
}

.managed-popup-card,
.admin-user-modal-card,
.delete-tool-card,
.withdraw-process-card,
.limit-box,
.register-loading-card {
  border-radius: 20px !important;
  animation: popupPremiumIn 300ms cubic-bezier(.2,.82,.25,1.06) both !important;
}

.managed-popup-card {
  width: min(100%, 390px) !important;
  padding: 20px !important;
  overflow: hidden;
  position: relative;
  background:
    linear-gradient(180deg, #fff5eb 0 70px, rgba(255, 255, 255, 0.98) 70px 100%) !important;
}

.managed-popup-card::before,
.limit-box::before {
  content: "i";
  width: 46px;
  height: 46px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border: 3px solid #ffffff;
  border-radius: 50%;
  color: #ffffff;
  background: linear-gradient(145deg, #fb923c, var(--popup-orange-deep));
  box-shadow: 0 0 0 8px rgba(249, 115, 22, 0.1), 0 10px 22px rgba(232, 91, 11, 0.2);
  font-size: 22px;
  font-weight: 950;
}

.managed-popup-card img {
  margin-bottom: 14px;
  border-radius: 16px !important;
}

.managed-popup-card h2,
.limit-box h2,
.delete-tool-card h2,
.withdraw-process-card h2 {
  color: var(--popup-ink) !important;
  font-weight: 900 !important;
}

.managed-popup-card p,
.limit-box p,
.delete-tool-card p,
.withdraw-process-card p {
  color: var(--popup-muted) !important;
  line-height: 1.55 !important;
}

.delete-tool-icon {
  border-radius: 18px !important;
  background: #fff0ef !important;
  box-shadow: 0 0 0 8px rgba(217, 45, 32, 0.07);
}

.delete-tool-modal:not(.hidden) .delete-tool-icon {
  animation: popupErrorShake 300ms 80ms ease both;
}

.team-qr-code {
  border: 1px solid rgba(249, 115, 22, 0.16) !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 30px rgba(31, 36, 43, 0.08) !important;
}

.register-loading-card {
  background:
    linear-gradient(180deg, #fff5eb 0 96px, rgba(255, 255, 255, 0.98) 96px 100%) !important;
}

.register-loading.show .register-loading-card {
  animation: popupPremiumIn 300ms cubic-bezier(.2,.82,.25,1.06) both !important;
}

.withdraw-process-card {
  background:
    radial-gradient(circle at 50% 0, rgba(249, 115, 22, 0.14), transparent 45%),
    rgba(255, 255, 255, 0.98) !important;
}

.withdraw-loader,
.processing-ring {
  filter: drop-shadow(0 10px 18px rgba(249, 115, 22, 0.2));
}

.limit-box {
  padding: 25px 20px 20px !important;
  background:
    linear-gradient(180deg, #fff5eb 0 72px, rgba(255, 255, 255, 0.98) 72px 100%) !important;
}

.limit-box::before {
  content: "!";
}

/* Premium action buttons; hrefs, IDs, handlers, and disabled states are untouched. */
.profile-modal-panel .btn,
.managed-popup-card button,
.limit-box .btn,
.purchase-account-continue,
#confirmPayment,
.delete-tool-actions .btn,
.withdraw-process-card .btn,
.admin-user-modal-card button,
.register-loading-card button {
  min-height: 48px;
  overflow: hidden;
  position: relative;
  border-radius: 999px !important;
  font-weight: 850 !important;
  transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease !important;
}

.profile-modal-panel .btn,
.managed-popup-card button,
.limit-box .btn:not(.ghost),
.purchase-account-continue,
#confirmPayment,
.admin-user-modal-card button:not(.danger) {
  border: 0 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #fb923c, var(--popup-orange-deep)) !important;
  box-shadow: 0 10px 22px rgba(232, 91, 11, 0.23) !important;
}

.profile-modal-panel .btn::after,
.managed-popup-card button::after,
.limit-box .btn::after,
.purchase-account-continue::after,
#confirmPayment::after,
.delete-tool-actions .btn::after {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.42);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
}

.profile-modal-panel .btn:active,
.managed-popup-card button:active,
.limit-box .btn:active,
.purchase-account-continue:active:not(:disabled),
#confirmPayment:active:not(:disabled),
.delete-tool-actions .btn:active {
  transform: scale(0.96) !important;
}

.profile-modal-panel .btn:active::after,
.managed-popup-card button:active::after,
.limit-box .btn:active::after,
.purchase-account-continue:active:not(:disabled)::after,
#confirmPayment:active:not(:disabled)::after,
.delete-tool-actions .btn:active::after {
  animation: popupRipple 300ms ease-out;
}

.delete-tool-confirm {
  color: #ffffff !important;
  background: linear-gradient(145deg, #ef6158, #d92d20) !important;
  box-shadow: 0 10px 22px rgba(217, 45, 32, 0.22) !important;
}

.delete-tool-cancel,
.limit-box .btn.ghost {
  border: 1px solid #e5e8ec !important;
  color: #5f6873 !important;
  background: #f5f7f8 !important;
  box-shadow: none !important;
}

@media (min-width: 520px) {
  .profile-modal,
  .home-service-modal,
  .team-qr-modal,
  .purchase-account-sheet,
  .tool-sheet,
  .withdraw-account-settings-sheet {
    width: 100% !important;
    inset: 0 !important;
    padding: 20px !important;
    align-items: center !important;
    transform: none !important;
  }

  .profile-modal-sheet,
  .home-service-sheet,
  .team-qr-sheet,
  .purchase-account-sheet-panel,
  .tool-sheet-panel,
  .withdraw-account-settings-panel {
    width: min(100%, 480px) !important;
    margin: auto !important;
    border-radius: 20px !important;
  }
}

@media (max-width: 420px) {
  .avatar-modal {
    padding: 12px !important;
    place-items: center !important;
    background-color: rgba(18, 22, 28, 0.52) !important;
  }

  .avatar-modal-sheet {
    width: 100% !important;
    height: auto !important;
    max-height: 92dvh !important;
    border-radius: 20px !important;
  }

  .toast {
    width: min(calc(100% - 28px), 340px) !important;
  }
}

@keyframes popupPremiumFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes popupPremiumIn {
  from { opacity: 0; transform: translateY(12px) scale(0.92); filter: blur(3px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes popupPremiumSheet {
  from { opacity: 0; transform: translateY(30px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes popupSlideDown {
  from { opacity: 0; transform: translate(-50%, -12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes popupSuccessBounce {
  0% { transform: translateX(-50%) scale(0.55); }
  65% { transform: translateX(-50%) scale(1.14); }
  100% { transform: translateX(-50%) scale(1); }
}

@keyframes popupErrorShake {
  0%, 100% { transform: translateX(0); }
  28% { transform: translateX(-4px) rotate(-2deg); }
  55% { transform: translateX(4px) rotate(2deg); }
  78% { transform: translateX(-2px); }
}

@keyframes popupToastErrorShake {
  0%, 100% { transform: translateX(-50%); }
  28% { transform: translateX(calc(-50% - 4px)) rotate(-2deg); }
  55% { transform: translateX(calc(-50% + 4px)) rotate(2deg); }
  78% { transform: translateX(calc(-50% - 2px)); }
}

@keyframes popupRipple {
  0% { opacity: 0.52; transform: translate(-50%, -50%) scale(0); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(26); }
}

@media (prefers-reduced-motion: reduce) {
  .toast,
  .toast::before,
  .admin-toast,
  .profile-modal-sheet,
  .avatar-modal-sheet,
  .home-service-sheet,
  .team-qr-sheet,
  .managed-popup-card,
  .admin-user-modal-card,
  .delete-tool-card,
  .withdraw-process-card,
  .limit-box,
  .register-loading-card {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* NovaPay 2026 dialog system: compact notifications and tactile sheets. */
.toast{width:min(calc(100% - 28px),380px)!important;min-height:76px!important;max-height:180px!important;top:auto!important;bottom:calc(94px + env(safe-area-inset-bottom))!important;padding:17px 18px 17px 70px!important;overflow:hidden!important;border:1px solid rgba(229,231,235,.94)!important;border-radius:22px!important;color:#111827!important;background:linear-gradient(135deg,rgba(255,255,255,.99),rgba(248,250,252,.98))!important;box-shadow:0 20px 55px rgba(17,24,39,.2),0 0 0 1px rgba(255,255,255,.7) inset!important;text-align:left!important;font-size:13px!important;line-height:1.42!important;transform:translate(-50%,22px) scale(.96)!important;backdrop-filter:blur(20px)!important}
.toast::before{left:16px!important;top:50%!important;width:42px!important;height:42px!important;border:0!important;background:linear-gradient(135deg,#ff8a00,#ff5e5e,#ff2d80)!important;box-shadow:0 9px 20px rgba(255,45,128,.22)!important;transform:translateY(-50%)!important}
.toast::after{left:37px!important;top:50%!important;transform:translate(-50%,-50%)!important;font-size:20px!important}.toast.success,.toast.error,.toast.warning{background:linear-gradient(135deg,rgba(255,255,255,.99),rgba(248,250,252,.98))!important}.toast.success::before{background:linear-gradient(145deg,#22c55e,#16a34a)!important}.toast.error::before{background:linear-gradient(145deg,#ef4444,#dc2626)!important}.toast.warning::before{background:linear-gradient(145deg,#fbbf24,#f59e0b)!important}
.toast.show{transform:translate(-50%,0) scale(1)!important;animation:popupHapticSettle .36s cubic-bezier(.2,.9,.25,1.12) both!important}.toast.error.show{animation:popupTactileError .38s ease both!important}.toast.success.show::before,.toast.error.show::before{animation:none!important}
.profile-modal-sheet,.avatar-modal-sheet,.home-service-sheet,.team-qr-sheet,.managed-popup-card,.admin-user-modal-card,.payment-modal,.purchase-account-sheet-panel,.match-card,.tool-sheet-panel,.withdraw-account-settings-panel,.delete-tool-card,.withdraw-process-card,.limit-box{overflow:hidden!important;border:1px solid rgba(255,255,255,.86)!important;background:radial-gradient(circle at 92% 0,rgba(255,45,128,.08),transparent 34%),linear-gradient(180deg,#fff,#f8fafc)!important;box-shadow:0 28px 85px rgba(17,24,39,.3)!important}
.profile-modal-sheet::before,.home-service-sheet::before,.team-qr-sheet::before,.payment-modal::before,.purchase-account-sheet-panel::before,.tool-sheet-panel::before,.withdraw-account-settings-panel::before,.delete-tool-card::before,.withdraw-process-card::before,.limit-box::after{position:absolute!important;inset:0 0 auto!important;height:4px!important;border:0!important;border-radius:0!important;content:""!important;background:linear-gradient(90deg,#ff8a00,#ff5e5e,#ff2d80)!important;box-shadow:none!important}
.profile-modal-sheet,.home-service-sheet,.team-qr-sheet,.payment-modal,.purchase-account-sheet-panel,.tool-sheet-panel,.withdraw-account-settings-panel,.delete-tool-card,.withdraw-process-card,.limit-box{position:relative!important}
.profile-modal:not(.hidden) .profile-modal-sheet,.avatar-modal:not(.hidden) .avatar-modal-sheet,.home-service-modal:not(.hidden) .home-service-sheet,.team-qr-modal:not(.hidden) .team-qr-sheet,.modal-backdrop:not(.hidden) .payment-modal,.purchase-account-sheet:not(.hidden) .purchase-account-sheet-panel,.tool-sheet:not(.hidden) .tool-sheet-panel,.withdraw-account-settings-sheet:not(.hidden) .withdraw-account-settings-panel,.delete-tool-modal:not(.hidden) .delete-tool-card,.withdraw-process-overlay:not(.hidden) .withdraw-process-card,.limit-popup:not(.hidden) .limit-box{animation:popupHapticSettle .38s cubic-bezier(.2,.9,.25,1.08) both!important}
#refreshOrders.is-refreshed{animation:refreshHaptic .42s ease both!important}#refreshOrders.is-refreshed svg{animation:popupRefreshSpin .42s ease both!important}
@keyframes popupHapticSettle{0%{opacity:0;transform:translateY(24px) scale(.94)}55%{opacity:1;transform:translateY(-3px) scale(1.012)}72%{transform:translateY(2px) scale(.996)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes popupTactileError{0%{opacity:0;transform:translate(-50%,20px) scale(.96)}45%{opacity:1;transform:translate(calc(-50% - 3px),0) scale(1)}62%{transform:translate(calc(-50% + 3px),0) scale(1)}78%{transform:translate(calc(-50% - 1px),0) scale(1)}100%{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes refreshHaptic{0%,100%{transform:translateX(0)}30%{transform:translateX(-2px)}55%{transform:translateX(2px)}75%{transform:translateX(-1px)}}
@keyframes popupRefreshSpin{to{transform:rotate(360deg)}}