.skeleton-screen {
      width: 100%;
      display: flex;
      flex-direction: column;
  }

  /* --- Blue Top Section --- */
  .skeleton-screen .blue-section {
      background-color: #00468c;
      padding: 8px 16px 20px 16px;
      display: flex;
      flex-direction: column;
      gap: 32px;
  }

  .skeleton-screen .account-header {
      height: 40px;
      width: 50%;
      margin: 0 auto;
      border-radius: 12px;
  }

  .skeleton-screen .title-line {
      height: 30px;
      width: 50%;
      border-radius: 6px;
  }

  .skeleton-screen .info-card {
      height: 30px;
      width: 80%;
      border-radius: 6px;
  }

  /* --- White Content Section --- */
  .skeleton-screen .content-section {
      background-color: #ffffff;
      padding: 24px 16px;
  }

  .skeleton-screen .centered-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
  }

  .skeleton-screen .text-line {
      height: 16px;
      width: 90%;
      max-width: 300px;
      border-radius: 4px;
  }

  .skeleton-screen .text-line.short {
      width: 70%;
      max-width: 250px;
  }

  .skeleton-screen .button {
      height: 40px;
      width: 60%;
      max-width: 280px;
      border-radius: 6px;
  }

  /* --- Shimmer Effect --- */
  .skeleton-screen .shimmer {
      background: linear-gradient(90deg,
              #e0e0e0 0px,
              #f5f5f5 40px,
              #e0e0e0 80px);
      background-size: 600px 100%;
      animation: shimmer 1.5s infinite linear;
  }

  /* --- Blue shimmer (blue bg) --- */
  .skeleton-screen .shimmer-blue {
      background: linear-gradient(90deg,
              #004276 0px,
              #005aa3 40px,
              #004276 80px);
      background-size: 600px 100%;
      animation: shimmer 1.5s infinite linear;
  }

  @keyframes shimmer {
      0% {
          background-position: -600px 0;
      }

      100% {
          background-position: 600px 0;
      }
  }