:root {
  --fx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fx-lift: 0 10px 24px color-mix(in srgb, var(--primary) 18%, transparent);
  --fx-ring: color-mix(in srgb, var(--primary) 28%, transparent);
}

 
@keyframes fxSoftPulse {
   
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

@keyframes fxPulseRing {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(1);
  }
  50% {
    opacity: 0;
    transform: scale(1.12);
  }
}

@keyframes fxShineSweep {
  0%,
  55% {
    transform: translateX(-120%) skewX(-12deg);
    opacity: 0;
  }
  62% {
    opacity: 0.45;
  }
  78%,
  100% {
    transform: translateX(140%) skewX(-12deg);
    opacity: 0;
  }
}

@keyframes fxFloatY {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

@keyframes fxIconBob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

@keyframes fxBarShimmer {
  0% {
    transform: translateX(-40%);
    opacity: 0.35;
  }
  100% {
    transform: translateX(140%);
    opacity: 0;
  }
}

@keyframes fxBadgePop {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

@keyframes fxBorderGlow {
   
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes fxEnterUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

 
.btn-primary,
button.btn-primary,
button.primary,
a.btn-primary-link,
body.admin-app .btn-primary,
body.user-app .buy-proxy-toolbar .btn-primary,
body.user-app .svc-panel-toolbar .btn-primary,
body.user-app .checkin-claim-btn,
body.auth-page .btn-primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform 0.18s var(--fx-ease), filter 0.2s ease;
}

.btn-primary:hover,
button.btn-primary:hover,
button.primary:hover:not(:disabled),
a.btn-primary-link:hover,
body.user-app .checkin-claim-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.btn-primary:active,
button.btn-primary:active,
button.primary:active,
body.user-app .checkin-claim-btn:active {
  transform: translateY(0) scale(0.98);
}

 
body.user-app .checkin-claim-btn::after,
body.user-app #createTopupBtn::after,
body.user-app .topup-create-btn::after,
body.user-app .promo-tip-modal__cta::after,
body.user-app .promo-event-modal__btn::after,
body.auth-page .auth-login-btn::after,
body.auth-page .landing-btn.primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 36%,
    rgba(255, 255, 255, 0.38) 48%,
    transparent 60%
  );
  transform: translateX(-120%) skewX(-12deg);
  animation: fxShineSweep 4s var(--fx-ease) infinite;  
}

body.user-app .checkin-claim-btn > *,
body.user-app #createTopupBtn > *,
body.user-app .topup-create-btn > *,
body.auth-page .auth-login-btn > *,
body.auth-page .landing-btn.primary > * {
  position: relative;
  z-index: 1;
}

 
body.user-app #createTopupBtn,
body.user-app .topup-create-btn {
  position: relative;
  animation: fxSoftPulse 2.8s ease-in-out infinite;  
}

body.user-app #createTopupBtn:hover,
body.user-app .topup-create-btn:hover {
  animation-play-state: paused;
  transform: translateY(-1px);
}

 
body.user-app .stat-card[role="button"],
body.user-app .stat-card.is-balance,
body.user-app .stat-card.is-reward-balance,
body.user-app .stat-card.is-proxy-active,
body.user-app .stat-card.is-proxy-expiring,
body.user-app .stat-card.is-orders,
body.user-app .stat-card.is-pending-orders {
  transition:
    transform 0.2s var(--fx-ease),
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}

body.user-app .stat-card[role="button"]:hover,
body.user-app a.stat-card:hover,
body.user-app .stat-card.is-balance:hover,
body.user-app .stat-card.is-reward-balance:hover,
body.user-app .stat-card.is-proxy-active:hover,
body.user-app .stat-card.is-proxy-expiring:hover,
body.user-app .stat-card.is-orders:hover,
body.user-app .stat-card.is-pending-orders:hover {
  transform: translateY(-3px);
  box-shadow: var(--fx-lift);
}

body.user-app .stat-card .stat-icon {
   
  transition: transform 0.18s var(--fx-ease);
}

body.user-app .stat-card:hover .stat-icon {
  transform: translateY(-2px);
}

body.user-app .checkin-dashboard-card,
body.user-app .proxy-trial-dashboard-card,
body.user-app .flash-sale-dashboard-card {
  transition:
    transform 0.2s var(--fx-ease),
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}

body.user-app .checkin-dashboard-card:hover,
body.user-app .proxy-trial-dashboard-card:hover,
body.user-app .flash-sale-dashboard-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 14%, transparent);
}

body.user-app .flash-sale-dashboard-card:not(.hidden) {
   
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--warning) 35%, var(--border));
}

body.user-app .flash-sale-dashboard-card__timer,
body.user-app .checkin-dashboard-btn:not(.is-done) {
  animation: fxFloatY 2.8s ease-in-out infinite;  
}

 
body.user-app .community-goal-bar-fill {
  position: relative;
  overflow: hidden;
}

body.user-app .community-goal-bar-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.45),
    transparent
  );
  animation: fxBarShimmer 2.6s linear infinite;  
  pointer-events: none;
}

body.user-app .community-goal-card:not(.hidden) {
  animation: fxEnterUp 0.45s var(--fx-ease) both;
}

body.user-app .community-goal-card.is-reached,
body.user-app .community-goal-card.is-complete {
  animation: fxSoftPulse 2.4s ease-in-out infinite;
}

 
body.user-app .user-prestige-badge:not(.hidden) {
  position: relative;
  overflow: hidden;
  animation: fxFloatY 3s ease-in-out infinite;  
}

body.user-app .user-prestige-badge:not(.hidden)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 60%
  );
  transform: translateX(-120%);
  animation: fxShineSweep 4s var(--fx-ease) infinite;  
  pointer-events: none;
}

 
body.user-app .section-hero,
body.user-app .buy-proxy-hero,
body.user-app .svc-hero,
body.user-app .utility-hero,
body.user-app .topup-hero,
body.user-app .checkin-hero,
body.user-app .collaborator-hero,
body.user-app .referral-hero,
body.user-app .vouchers-hero {
  position: relative;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

body.user-app .section-hero:hover,
body.user-app .buy-proxy-hero:hover,
body.user-app .svc-hero:hover,
body.user-app .utility-hero:hover {
  box-shadow: 0 14px 32px color-mix(in srgb, var(--primary) 12%, transparent);
}

body.user-app .section-hero-trust-item,
body.user-app .buy-proxy-trust-item,
body.user-app .topup-hero-trust-item {
  transition: transform 0.18s var(--fx-ease), background 0.18s ease;
}

body.user-app .section-hero-trust-item:hover,
body.user-app .buy-proxy-trust-item:hover,
body.user-app .topup-hero-trust-item:hover {
  transform: translateY(-1px);
}

 
body.user-app .sidebar .nav-link.active,
body.user-app .sidebar a.active {
  box-shadow:
    inset 3px 0 0 var(--primary),
    0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent);
}

body.user-app .nav-unread-badge:not(.hidden),
body.user-app .user-mobile-tab__badge:not(.hidden),
body.admin-app .nav-unread-badge:not(:empty),
body.admin-app .badge.badge-danger {
  animation: fxBadgePop 1.8s ease-in-out infinite;  
}

 
body.user-app .promo-tip-modal__cta,
body.user-app .promo-event-modal__btn {
  position: relative;
  overflow: hidden;
}

body.user-app .promo-tip-modal__cta::after,
body.user-app .promo-event-modal__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 36%,
    rgba(255, 255, 255, 0.4) 48%,
    transparent 60%
  );
  animation: fxShineSweep 3.2s var(--fx-ease) infinite;  
}

 
@media (max-width: 768px) {
  body.user-app .user-mobile-tab.is-active .user-mobile-tab__ico,
  body.user-app .user-mobile-tab[aria-current="page"] .user-mobile-tab__ico,
  body.user-app .user-mobile-tab[aria-expanded="true"] .user-mobile-tab__ico {
    animation: fxIconBob 2s ease-in-out infinite;
  }

  body.admin-app .admin-mobile-tab.is-active .admin-mobile-tab__ico,
  body.admin-app .admin-mobile-tab[aria-current="page"] .admin-mobile-tab__ico {
    animation: fxIconBob 2s ease-in-out infinite;  
  }
}

 
body.admin-app .stat-card,
body.admin-app .dashboard-today-stat,
body.admin-app .dashboard-kpi-stat,
body.admin-app .dashboard-health-item,
body.admin-app .dashboard-service-card,
body.admin-app .dashboard-order-detail-tile {
  transition:
    transform 0.2s var(--fx-ease),
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}

body.admin-app .stat-card:hover,
body.admin-app .dashboard-today-stat:hover,
body.admin-app .dashboard-kpi-stat:hover,
body.admin-app .dashboard-service-card:hover,
body.admin-app .dashboard-order-detail-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 14%, transparent);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}

body.admin-app .stat-card .stat-icon {
  transition: transform 0.18s var(--fx-ease);
}

body.admin-app .stat-card:hover .stat-icon {
  transform: translateY(-2px);
}

body.admin-app .dashboard-total-balance {
  position: relative;
  overflow: hidden;
}

body.admin-app .dashboard-total-balance::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 38%,
    color-mix(in srgb, var(--primary) 18%, transparent) 50%,
    transparent 62%
  );
  animation: fxShineSweep 5s var(--fx-ease) infinite;  
}

body.admin-app .dashboard-total-balance-value {
  position: relative;
  z-index: 1;
}

body.admin-app .content-header-eyebrow,
body.admin-app .settings-panel-card__eyebrow {
  letter-spacing: 0.08em;
}

body.admin-app .settings-panel-card,
body.admin-app .pricing-panel,
body.admin-app .proxy-hub-panel {
  transition: box-shadow 0.22s ease, border-color 0.22s ease;
}

body.admin-app .settings-panel-card:hover,
body.admin-app .pricing-panel:hover {
  box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 10%, transparent);
}

body.admin-app .proxy-hub-tab.active,
body.admin-app .pricing-card-menu__btn.active {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

body.admin-app #adminSidebar .nav-item.active,
body.admin-app #adminSidebar a.active {
  box-shadow:
    inset 3px 0 0 var(--primary),
    0 0 0 1px color-mix(in srgb, var(--primary) 14%, transparent);
}

body.admin-app .admin-nav-group-toggle.has-pending-badge {
  position: relative;
}

body.admin-app .filter-bar .btn-primary,
body.admin-app .admin-form-toolbar .btn-primary,
body.admin-app .section-actions .btn-primary {
  --fx-pulse-color: var(--primary);
}

 
#toastContainer .toast {
  animation: fxEnterUp 0.28s var(--fx-ease) both;
}

body.user-app .support-chat-btn--fab,
body.admin-app .support-chat-btn--fab {
  animation: fxSoftPulse 3.2s ease-in-out infinite;  
}

 
body.auth-page .login-card,
body.auth-page .auth-card {
  position: relative;
  isolation: isolate;
  transition: box-shadow 0.25s ease, transform 0.25s var(--fx-ease);
  animation: fxScaleIn 0.45s var(--fx-ease) both;
}

body.auth-page .login-card:hover,
body.auth-page .auth-card:hover {
  box-shadow: 0 18px 40px color-mix(in srgb, var(--primary) 16%, transparent);
}

body.auth-page .btn-primary,
body.auth-page button.primary,
body.auth-page .auth-login-btn,
body.auth-page .landing-btn.primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  animation: fxSoftPulse 3.2s ease-in-out infinite;  
}

body.auth-page .btn-primary:hover,
body.auth-page button.primary:hover,
body.auth-page .auth-login-btn:hover,
body.auth-page .landing-btn.primary:hover {
  animation-play-state: paused;
  transform: translateY(-1px);
  filter: brightness(1.04);
}

 
@keyframes authOrbFloat {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.45;
  }
  50% {
    transform: translate(10px, -14px) scale(1.06);
    opacity: 0.7;
  }
}

@keyframes authFeatureIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

body.auth-page .auth-showcase {
  position: relative;
  overflow: hidden;
}

body.auth-page .auth-showcase::before,
body.auth-page .auth-showcase::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
   
  will-change: transform, opacity;
  animation: authOrbFloat 9s ease-in-out infinite;  
}

body.auth-page .auth-showcase::before {
  width: min(280px, 55vw);
  height: min(280px, 55vw);
  top: -8%;
  right: -10%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--secondary) 40%, transparent),
    transparent 70%
  );
}

body.auth-page .auth-showcase::after {
  width: min(220px, 45vw);
  height: min(220px, 45vw);
  bottom: 8%;
  left: -8%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--primary) 36%, transparent),
    transparent 70%
  );
  animation-delay: -3s;
}

body.auth-page .auth-showcase > * {
  position: relative;
  z-index: 1;
}

 

body.auth-page .auth-brand,
body.auth-page .auth-brand-logo {
  animation: fxFloatY 3.6s ease-in-out infinite;  
}

body.auth-page .auth-showcase-title {
  animation: fxEnterUp 0.5s var(--fx-ease) both;
}

body.auth-page .auth-showcase-desc {
  animation: fxEnterUp 0.55s var(--fx-ease) 0.08s both;
}

body.auth-page .auth-feature-list li {
  animation: authFeatureIn 0.45s var(--fx-ease) both;
  transition: transform 0.18s var(--fx-ease), background 0.18s ease;
}

body.auth-page .auth-feature-list li:nth-child(1) {
  animation-delay: 0.12s;
}
body.auth-page .auth-feature-list li:nth-child(2) {
  animation-delay: 0.2s;
}
body.auth-page .auth-feature-list li:nth-child(3) {
  animation-delay: 0.28s;
}
body.auth-page .auth-feature-list li:nth-child(4) {
  animation-delay: 0.36s;
}

body.auth-page .auth-feature-list li:hover {
  transform: translateX(4px);
}

body.auth-page .auth-feature-icon {
  transition: transform 0.18s var(--fx-ease);
}

body.auth-page .auth-feature-list li:hover .auth-feature-icon {
  transform: translateY(-2px);
}

body.auth-page .auth-user-stat,
body.auth-page .auth-showcase-badges span,
body.auth-page .auth-admin-badge {
  transition: transform 0.18s var(--fx-ease), box-shadow 0.2s ease;
  animation: fxEnterUp 0.45s var(--fx-ease) 0.4s both;
}

body.auth-page .auth-user-stat:hover,
body.auth-page .auth-showcase-badges span:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 18%, transparent);
}

body.auth-page .auth-admin-badge {
  animation: fxSoftPulse 3s ease-in-out infinite;  
}

body.auth-page .auth-card-accent {
  position: relative;
  overflow: hidden;
}

body.auth-page .auth-card-accent::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, #fff 55%, transparent),
    transparent
  );
  transform: translateX(-120%);
  animation: fxShineSweep 3.8s var(--fx-ease) infinite;  
}

body.auth-page .auth-user-mark,
body.auth-page .auth-admin-mark {
   
  transition: transform 0.18s var(--fx-ease);
}

body.auth-page .auth-input-wrap {
  transition: transform 0.15s var(--fx-ease);
}

body.auth-page .auth-input-wrap:focus-within {
  transform: translateY(-1px);
}

body.auth-page .auth-input-wrap:focus-within .auth-input-icon {
  color: var(--primary);
}

body.auth-page .auth-switch a {
  position: relative;
  transition: color 0.15s ease;
}

body.auth-page .auth-switch a:hover {
  filter: brightness(1.1);
}

body.auth-page .user-pwa-install:not(.hidden),
body.auth-page .admin-pwa-install:not(.hidden) {
  animation: fxSoftPulse 3.4s ease-in-out infinite;  
}

 
body.auth-page .landing-feature {
  transition: transform 0.2s var(--fx-ease), box-shadow 0.22s ease;
  animation: fxEnterUp 0.4s var(--fx-ease) both;
}

body.auth-page .landing-features .landing-feature:nth-child(1) {
  animation-delay: 0.1s;
}
body.auth-page .landing-features .landing-feature:nth-child(2) {
  animation-delay: 0.18s;
}
body.auth-page .landing-features .landing-feature:nth-child(3) {
  animation-delay: 0.26s;
}

body.auth-page .landing-feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--primary) 14%, transparent);
}

body.auth-page .landing-btn.ghost {
  transition: transform 0.18s var(--fx-ease), border-color 0.18s ease, background 0.18s ease;
}

body.auth-page .landing-btn.ghost:hover {
  transform: translateY(-1px);
}

 
@keyframes fxScaleIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes fxTabGlow {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

 
.popup:not(.hidden) .popup-box,
.modal:not(.hidden) .modal-content,
body.user-app .promo-tip-modal:not(.hidden),
body.user-app .promo-event-modal:not(.hidden) {
  animation: fxScaleIn 0.28s var(--fx-ease) both;
}

.popup-box--confirm .btn-primary,
.popup-box--checkout .btn-primary,
#confirmOkBtn {
  animation: fxSoftPulse 3s ease-in-out infinite;  
}

.popup-box--confirm .btn-primary:hover,
#confirmOkBtn:hover {
  animation-play-state: paused;
}

 
.buy-day-btn.active,
.renew-day-btn.active,
body.user-app .rotate-period-btn.active,
body.user-app .vps-plan-chip.active {
  animation: fxTabGlow 2.8s ease-in-out infinite;  
}

 
body.user-app .topup-info-card,
body.user-app .topup-wallet-stat {
  transition:
    transform 0.18s var(--fx-ease),
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

body.user-app .topup-info-card:hover,
body.user-app .topup-wallet-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 12%, transparent);
}

body.user-app .topup-info-card--note {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 28%, var(--border));
}

 
body.user-app .prestige-progress-bar__fill,
body.user-app #prestigeProgressBarFill {
  position: relative;
  overflow: hidden;
}

body.user-app .prestige-progress-bar__fill::after,
body.user-app #prestigeProgressBarFill::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: fxBarShimmer 2.8s linear infinite;  
  pointer-events: none;
}

 
body.user-app .vouchers-list > *,
body.user-app .voucher-item,
body.user-app .buy-discount-hint:not(:empty) {
  transition: transform 0.18s var(--fx-ease), box-shadow 0.2s ease;
}

body.user-app .vouchers-list > *:hover,
body.user-app .voucher-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--warning) 14%, transparent);
}

body.user-app .vouchers-stats-grid .utility-stat,
body.user-app .vouchers-stats-grid .stat-card {
  transition: transform 0.18s var(--fx-ease), box-shadow 0.2s ease;
}

body.user-app .vouchers-stats-grid .utility-stat:hover,
body.user-app .vouchers-stats-grid .stat-card:hover {
  transform: translateY(-2px);
}

 
body.user-app .prestige-summary-stat {
  transition: transform 0.18s var(--fx-ease), box-shadow 0.2s ease;
}

body.user-app .prestige-summary-stat:hover {
  transform: translateY(-1px);
}

 
body.user-app .sidebar .nav-link:hover:not(.nav-group-toggle),
body.user-app .sidebar a.nav-link:hover {
  transform: translateX(2px);
  transition: transform 0.15s var(--fx-ease), background 0.15s ease;
}

body.user-app .sidebar .nav-group-toggle:hover {
  transform: none;
}

body.user-app .sidebar .nav-link.active {
  box-shadow:
    inset 3px 0 0 var(--primary),
    0 0 0 1px color-mix(in srgb, var(--primary) 16%, transparent);
}

 
body.user-app .dashboard-promo-row > * {
  transition: transform 0.2s var(--fx-ease), box-shadow 0.22s ease;
}

body.user-app .promo-event-banner.is-visible {
   
  transition: filter 0.2s ease;
}

body.user-app .promo-event-banner.is-visible:hover {
  filter: brightness(1.05) saturate(1.05);
}

 
body.user-app .rotate-buy-summary,
body.user-app .buff-price-box,
body.user-app .buff-order-card,
body.user-app .checkout-confirm__total {
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

body.user-app .rotate-buy-summary:hover,
body.user-app .buff-price-box:hover {
  box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
}

 
body.admin-app .content-header {
  transition: box-shadow 0.2s ease;
}

body.admin-app .content-header:hover {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--primary) 8%, transparent);
}

body.admin-app .proxy-hub-tab.active,
body.admin-app .pricing-card-menu__btn.active,
body.admin-app .admin-price-tier--primary {
  animation: fxTabGlow 2.8s ease-in-out infinite;  
}

body.admin-app .admin-mobile-tab__badge:not(.hidden),
body.admin-app .admin-nav-group-toggle.has-pending-badge .nav-unread-badge {
  animation: fxBadgePop 1.8s ease-in-out infinite;
}

body.admin-app .dashboard-health-item.is-warn,
body.admin-app .dashboard-health-item.is-danger,
body.admin-app tr.is-pending,
body.admin-app .rq-row--pending {
   
  box-shadow: inset 3px 0 0 var(--warning, #f59e0b);
}

body.admin-app .dashboard-health-item.is-danger {
  box-shadow: inset 3px 0 0 var(--danger, #ef4444);
}

body.admin-app .btn-danger,
body.admin-app .btn-warning {
  transition: transform 0.15s var(--fx-ease), box-shadow 0.2s ease;
}

body.admin-app .btn-danger:hover,
body.admin-app .btn-warning:hover {
  transform: translateY(-1px);
}

body.admin-app .dashboard-chart-wrap {
  transition: box-shadow 0.22s ease, border-color 0.22s ease;
}

body.admin-app .dashboard-chart-wrap:hover {
  box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 10%, transparent);
}

 
@media (prefers-reduced-motion: reduce) {
  .btn-primary::after,
  button.btn-primary::after,
  button.primary::after,
  a.btn-primary-link::after,
  body.user-app .checkin-claim-btn::after,
  body.user-app .promo-tip-modal__cta::after,
  body.user-app .promo-event-modal__btn::after,
  body.user-app .user-prestige-badge:not(.hidden)::after,
  body.admin-app .dashboard-total-balance::after,
  body.user-app .stat-card .stat-icon,
  body.admin-app .stat-card .stat-icon,
  body.user-app #createTopupBtn,
  body.user-app .topup-create-btn,
  body.user-app .flash-sale-dashboard-card:not(.hidden),
  body.user-app .flash-sale-dashboard-card__timer,
  body.user-app .checkin-dashboard-btn:not(.is-done),
  body.user-app .community-goal-bar-fill,
  body.user-app .community-goal-card:not(.hidden),
  body.user-app .community-goal-card.is-reached,
  body.user-app .community-goal-card.is-complete,
  body.user-app .user-prestige-badge:not(.hidden),
  body.user-app .nav-unread-badge:not(.hidden),
  body.user-app .user-mobile-tab__badge:not(.hidden),
  body.admin-app .nav-unread-badge:not(:empty),
  body.admin-app .badge.badge-danger,
  body.admin-app .dashboard-total-balance,
  body.user-app .support-chat-btn--fab,
  body.admin-app .support-chat-btn--fab,
  body.auth-page .btn-primary,
  body.auth-page button.primary,
  body.auth-page .auth-login-btn,
  body.auth-page .landing-btn.primary,
  body.auth-page .auth-showcase::before,
  body.auth-page .auth-showcase::after,
  body.auth-page .auth-showcase-grid,
  body.auth-page .auth-brand,
  body.auth-page .auth-brand-logo,
  body.auth-page .auth-showcase-title,
  body.auth-page .auth-showcase-desc,
  body.auth-page .auth-feature-list li,
  body.auth-page .auth-feature-icon,
  body.auth-page .auth-user-stat,
  body.auth-page .auth-showcase-badges span,
  body.auth-page .auth-admin-badge,
  body.auth-page .auth-card-accent::after,
  body.auth-page .auth-user-mark,
  body.auth-page .auth-admin-mark,
  body.auth-page .landing-feature,
  body.auth-page .user-pwa-install:not(.hidden),
  body.user-app .user-mobile-tab.is-active .user-mobile-tab__ico,
  body.user-app .user-mobile-tab[aria-current="page"] .user-mobile-tab__ico,
  body.admin-app .admin-mobile-tab.is-active .admin-mobile-tab__ico,
  .popup:not(.hidden) .popup-box,
  .modal:not(.hidden) .modal-content,
  .popup-box--confirm .btn-primary,
  #confirmOkBtn,
  .buy-day-btn.active,
  .renew-day-btn.active,
  body.user-app .topup-info-card--note,
  body.user-app .prestige-progress-bar__fill,
  body.user-app #prestigeProgressBarFill,
  body.admin-app .proxy-hub-tab.active,
  body.admin-app .pricing-card-menu__btn.active,
  body.admin-app .admin-mobile-tab__badge:not(.hidden),
  body.admin-app .dashboard-health-item.is-warn,
  body.admin-app .dashboard-health-item.is-danger,
  body.admin-app tr.is-pending,
  body.admin-app .rq-row--pending {
    animation: none !important;
  }

  body.user-app .stat-card[role="button"]:hover,
  body.user-app .stat-card.is-balance:hover,
  body.admin-app .stat-card:hover,
  body.admin-app .dashboard-service-card:hover,
  body.user-app .topup-info-card:hover,
  body.user-app .vouchers-list > *:hover,
  body.user-app .voucher-item:hover,
  body.user-app .sidebar .nav-link:hover,
  body.auth-page .auth-feature-list li:hover,
  body.auth-page .auth-user-stat:hover,
  body.auth-page .landing-feature:hover,
  body.auth-page .login-card:hover,
  body.auth-page .auth-card:hover {
    transform: none;
  }
}

 
@media (max-width: 768px) {
  body.user-app .flash-sale-dashboard-card__timer,
  body.user-app .checkin-dashboard-btn:not(.is-done),
  body.user-app .user-prestige-badge:not(.hidden),
  body.user-app .community-goal-bar-fill::after,
  body.user-app .prestige-progress-bar__fill::after,
  body.user-app #prestigeProgressBarFill::after,
  body.admin-app .dashboard-total-balance::after,
  body.auth-page .auth-brand,
  body.auth-page .auth-brand-logo,
  body.auth-page .auth-card-accent::after,
  .buy-day-btn.active,
  .renew-day-btn.active {
    animation: none !important;
  }

  body.user-app .support-chat-btn--fab,
  body.admin-app .support-chat-btn--fab,
  body.user-app #createTopupBtn,
  body.user-app .topup-create-btn,
  body.auth-page .auth-login-btn {
    animation-duration: 4s;
  }
}