/*!***************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[11].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[11].oneOf[12].use[3]!./node_modules/react-loading-skeleton/dist/skeleton.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************/
@keyframes react-loading-skeleton {
  100% {
    transform: translateX(100%);
  }
}

.react-loading-skeleton {
  --base-color: #ebebeb;
  --highlight-color: #f5f5f5;
  --animation-duration: 1.5s;
  --animation-direction: normal;
  --pseudo-element-display: block; /* Enable animation */

  background-color: var(--base-color);

  width: 100%;
  border-radius: 0.25rem;
  display: inline-flex;
  line-height: 1;

  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
}

.react-loading-skeleton::after {
  content: ' ';
  display: var(--pseudo-element-display);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-repeat: no-repeat;
  background-image: var(
    --custom-highlight-background,
    linear-gradient(
      90deg,
      var(--base-color) 0%,
      var(--highlight-color) 50%,
      var(--base-color) 100%
    )
  );
  transform: translateX(-100%);

  animation-name: react-loading-skeleton;
  animation-direction: var(--animation-direction);
  animation-duration: var(--animation-duration);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@media (prefers-reduced-motion) {
  .react-loading-skeleton {
    --pseudo-element-display: none; /* Disable animation */
  }
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[11].oneOf[7].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[11].oneOf[7].use[3]!./src/components/RealTimeInfo.module.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************/
.RealTimeInfo_card__f0glS {
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  padding: 1rem;
  transition: all 0.3s ease;
  position: sticky;
  top: 32px;
  z-index: 100;
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.852);
}

.RealTimeInfo_card__f0glS:hover {
  background: rgba(200, 200, 200, 0.2);
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.RealTimeInfo_info__hGtG_ {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.RealTimeInfo_item__t8nIS {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.RealTimeInfo_red__Dv4Cc {
  color: #ff4d4f;
  margin-right: 0.25rem;
  font-weight: 500;
}

.RealTimeInfo_blue__aW3JJ {
  color: #1890ff;
  font-weight: 500;
}

.RealTimeInfo_countdown__ntrcT {
  background-color: #333;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 1rem;
  font-weight: 500;
  display: inline-block;
  min-width: 3.5rem;
  text-align: center;
}

.RealTimeInfo_loading__HGVV8 {
  text-align: center;
  color: #999;
  padding: 1.25rem;
  font-size: 0.875rem;
}

.RealTimeInfo_error__08bWt {
  text-align: center;
  color: #ff4d4f;
  padding: 1.25rem;
  font-size: 0.875rem;
}

/* 动画效果 */
@keyframes RealTimeInfo_bounceIn__1BuTD {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes RealTimeInfo_glow__Pfhy5 {
  0% {
    box-shadow: 0 0 5px rgba(107, 114, 128, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(107, 114, 128, 0.8);
  }
  100% {
    box-shadow: 0 0 5px rgba(107, 114, 128, 0.5);
  }
}

@keyframes RealTimeInfo_pop__2NLw8 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

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

/* 平板设备适配 */
@media (max-width: 1024px) {
  .RealTimeInfo_card__f0glS {
    padding: 0.875rem;
  }
  
  .RealTimeInfo_item__t8nIS {
    font-size: 0.8125rem;
  }
  
  .RealTimeInfo_countdown__ntrcT {
    font-size: 0.9375rem;
    padding: 0.2rem 0.4rem;
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .RealTimeInfo_card__f0glS {
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0.375rem;
  }

  .RealTimeInfo_item__t8nIS {
    font-size: 0.6875rem;
    flex-wrap: wrap;
    gap: 0.375rem;
  }

  .RealTimeInfo_countdown__ntrcT {
    font-size: 0.75rem;
    padding: 0.125rem 0.25rem;
    min-width: 2.5rem;
  }
  
  .RealTimeInfo_loading__HGVV8 {
    padding: 1rem;
    font-size: 0.75rem;
  }
}

/* 触摸设备优化 */
@media (hover: none) {
  .RealTimeInfo_card__f0glS {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  .RealTimeInfo_item__t8nIS {
    padding: 0.25rem 0;
  }
  
  .RealTimeInfo_countdown__ntrcT {
    padding: 0.375rem 0.625rem;
  }
}

@keyframes RealTimeInfo_shake-horizontal__J9LdI {
  0% { transform: translateX(0) scale(1); opacity: 1; }
  10% { transform: translateX(-16px) scale(1.15); opacity: 0.7; }
  20% { transform: translateX(16px) scale(1.2); opacity: 1; }
  30% { transform: translateX(-12px) scale(1.1); opacity: 0.8; }
  40% { transform: translateX(12px) scale(1.15); opacity: 1; }
  50% { transform: translateX(-8px) scale(1.05); opacity: 0.8; }
  60% { transform: translateX(8px) scale(1.1); opacity: 1; }
  70% { transform: translateX(-4px) scale(1.05); opacity: 0.9; }
  80% { transform: translateX(4px) scale(1.08); opacity: 1; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}
.RealTimeInfo_animate-shake-horizontal__F508C {
  animation: RealTimeInfo_shake-horizontal__J9LdI 0.5s infinite;
}

.RealTimeInfo_dot-gradient__Jiz01 {
  color: #4b5563;
  background: linear-gradient(90deg, #6b7280 0%, #4b5563 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  font-weight: bold;
}
.RealTimeInfo_dot-center__unuhy {
  color: #666;
  font-weight: bold;
}

.RealTimeInfo_waitingDots__rvd7W {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.RealTimeInfo_dot__5sKgi {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #9ca3af !important;
  animation: RealTimeInfo_dotPulse__DusJM 1.4s infinite;
}

.RealTimeInfo_dot__5sKgi:nth-child(2) {
  animation-delay: 0.2s;
}

.RealTimeInfo_dot__5sKgi:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes RealTimeInfo_dotPulse__DusJM {
  0%, 100% {
    background-color: #9ca3af !important;
    transform: scale(1);
  }
  50% {
    background-color: #6b7280 !important;
    transform: scale(1.2);
  }
}