/* skeleton base */
  .skeleton {
      position: relative;
      overflow: hidden;
      background: #1f2937;
      border-radius: 14px;
  }

  .skeleton::after {
      content: "";
      position: absolute;
      inset: 0;
      transform: translateX(-100%);
      background: linear-gradient(90deg,
              transparent,
              rgba(255, 255, 255, 0.08),
              transparent);
      animation: shimmer 1.2s infinite;
  }

  @keyframes shimmer {
      100% {
          transform: translateX(100%);
      }
  }

  /* card height including data section */
  .skeleton-card {
      display: flex;
      flex-direction: column;
      /* slightly taller for data section */
  }


  .skeleton-card .data {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      padding: 1rem;
  }

  /* skeleton for data rows */
  .skeleton-data-row {
      height: 20px;
      border-radius: 1rem;
      background: #1f2937;
      position: relative;
      overflow: hidden;
  }

  .skeleton-data-row::after {
      content: "";
      position: absolute;
      inset: 0;
      transform: translateX(-100%);
      background: linear-gradient(90deg,
              transparent,
              rgba(255, 255, 255, 0.08),
              transparent);
      animation: shimmer 1.2s infinite;
  }

  /* result box */
  .compatibility-result {
      text-align: center;
      padding: 3rem 1rem;
      box-shadow: 0px 0px 2px gray;
      height: 100%;
      border-radius: 1rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: linear-gradient(358deg, var(--brand-color), var(--brand-color-sec), #2025ea, #313131);
      background-size: 400% 600%;
      animation: gradientShift 1s ease infinite;

      @keyframes gradientShift {
          0% {
              background-position: 0% 50%;
          }

          50% {
              background-position: 100% 50%;
          }

          100% {
              background-position: 0% 50%;
          }
      }


      color: white;
  }

  .compatibility-result.success {
      color: #22c55e;
      font-weight: 900;

  }

  .compatibility-result.error {
      color: #ef4444;
      font-weight: 900;

  }

  .compatibility-result button {
      margin-top: 1.5rem;
      padding: 0.8rem 2.2rem;
      border-radius: 1rem;
      background: #3b82f6;
      color: white;
      border: none;
      font-weight: 600;
      cursor: pointer;
  }

  /* Breathing shadow for loading selects */
  .select-loading {
      box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
      animation: breathe 1.2s ease-in-out infinite;
      border-radius: 12px;
  }

  @keyframes breathe {
      0% {
          box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
      }

      50% {
          box-shadow: 0 0 15px 5px rgba(59, 130, 246, 0.5);
      }

      100% {
          box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
      }
  }