/* 移动端优化的骨架屏样式 */
#skeleton-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
  overflow: hidden;
}

.skeleton-container {
  width: 100%;
  max-width: 600px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin: 20px 16px;
  min-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
}

.skeleton-item {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 6px;
  margin-bottom: 16px;
  flex-shrink: 0;
}

/* 语言选择器区域 */
.skeleton-header {
  height: 36px;
  width: 45%;
  margin-left: auto;
  margin-bottom: 20px;
  border-radius: 18px;
}

/* 倒计时区域 */
.skeleton-timer {
  height: 50px;
  width: 70%;
  margin: 0 auto 20px;
  border-radius: 8px;
}

/* 金额显示区域 */
.skeleton-amount {
  height: 70px;
  width: 100%;
  margin-bottom: 20px;
  border-radius: 8px;
}

/* 金额警告提示 */
.skeleton-warning {
  height: 32px;
  width: 85%;
  margin: 0 auto 20px;
  border-radius: 16px;
}

/* 银行信息区域 */
.skeleton-info {
  height: 44px;
  width: 100%;
  margin-bottom: 16px;
  border-radius: 8px;
}

/* 账号信息区域 */
.skeleton-account {
  height: 60px;
  width: 100%;
  margin-bottom: 16px;
  border-radius: 8px;
}

/* 温馨提示区域 */
.skeleton-tips {
  height: 40px;
  width: 100%;
  margin-bottom: 20px;
  border-radius: 8px;
}

/* 操作按钮 */
.skeleton-button {
  height: 48px;
  width: 100%;
  margin-top: auto;
  border-radius: 8px;
}

@keyframes skeleton-loading {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .skeleton-container {
    margin: 10px 12px;
    padding: 16px;
    border-radius: 8px;
    min-height: calc(100vh - 20px);
  }
  
  .skeleton-header {
    height: 32px;
    width: 40%;
    margin-bottom: 16px;
  }
  
  .skeleton-timer {
    height: 45px;
    width: 75%;
    margin-bottom: 16px;
  }
  
  .skeleton-amount {
    height: 65px;
    margin-bottom: 16px;
  }
  
  .skeleton-warning {
    height: 28px;
    width: 90%;
    margin-bottom: 16px;
  }
  
  .skeleton-info,
  .skeleton-account {
    height: 40px;
    margin-bottom: 12px;
  }
  
  .skeleton-tips {
    height: 36px;
    margin-bottom: 16px;
  }
  
  .skeleton-button {
    height: 44px;
  }
}

/* 小屏幕设备优化 */
@media (max-width: 480px) {
  .skeleton-container {
    margin: 8px 10px;
    padding: 14px;
    min-height: calc(100vh - 16px);
  }
  
  .skeleton-header {
    height: 30px;
    width: 35%;
  }
  
  .skeleton-timer {
    height: 42px;
    width: 80%;
  }
  
  .skeleton-amount {
    height: 60px;
  }
}