/* Club VIP v2.8.0 — estabilidad visual sin reinicios de animación.
   Se carga después de styles.css con un nombre nuevo para evitar mezclar CSS
   almacenado de versiones anteriores. */

#app:not(.hidden) .view,
#app:not(.hidden) .view::before,
#app:not(.hidden) .view::after,
#app:not(.hidden) .view * {
  animation: none !important;
  animation-name: none !important;
  animation-delay: 0s !important;
  animation-duration: 0s !important;
}

#app:not(.hidden) .view.active {
  display: block;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  -webkit-transform: none !important;
  content-visibility: visible !important;
}

#app:not(.hidden) .view.active > :not(.hidden),
#app:not(.hidden) .view.active .card:not(.hidden),
#app:not(.hidden) .view.active .panel:not(.hidden),
#app:not(.hidden) .view.active .history:not(.hidden),
#app:not(.hidden) .view.active .history-pick:not(.hidden),
#app:not(.hidden) .view.active .achievement:not(.hidden),
#app:not(.hidden) .view.active .message-card:not(.hidden),
#app:not(.hidden) .view.active .closed-box:not(.hidden),
#app:not(.hidden) .view.active .closed-state:not(.hidden) {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  -webkit-transform: none !important;
  transition-property: border-color, background-color, color !important;
  will-change: auto !important;
}

/* Chromium puede repintar una capa completa al actualizar contenido dentro de
   paneles con backdrop-filter. Los paneles conservan el diseño, pero sin esa
   capa de composición inestable. */
#app:not(.hidden) .view .panel,
#app:not(.hidden) .view .card,
#app:not(.hidden) .view .bank-account,
#app:not(.hidden) .view .closed-box,
#app:not(.hidden) .view .closed-state,
#app:not(.hidden) .view .notification,
#app:not(.hidden) .view .history,
#app:not(.hidden) .view .history-pick,
#app:not(.hidden) .view .achievement,
#app:not(.hidden) .view .message-card {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#app:not(.hidden) .view .panel,
#app:not(.hidden) .view .card,
#app:not(.hidden) .view .bank-account {
  background-color: rgba(19, 19, 19, .97) !important;
}

/* Compatibilidad defensiva con una clase usada por la versión 2.6.0. */
body.clubvip-live-update #app .view.active,
body.clubvip-live-update #app .view.active .card,
body.clubvip-live-update #app .view.active .panel,
body.clubvip-live-update #app .view.active .history,
body.clubvip-live-update #app .view.active .history-pick,
body.clubvip-live-update #app .view.active .achievement,
body.clubvip-live-update #app .view.active .message-card {
  animation: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  #app:not(.hidden) .view button,
  #app:not(.hidden) .view input,
  #app:not(.hidden) .view select {
    transition: border-color .12s ease, background-color .12s ease, color .12s ease !important;
  }
}